React-router錯誤直接通過路徑訪問或刷新頁面

Question

我已經實現了react-router沒有任何問題，它工作正常，但由於某些原因，用戶刷新頁面或嘗試通過路徑直接訪問主頁的不同頁面我得到一個錯誤，如不能GET /無論如何（例如，不能GET /博客）。

以下是代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import store from 'store';

// Layouts
import App from 'layouts/app';

// Components
import Portfolio     from 'ui/portfolio';
import BlogContainer from 'ui/blog-container';
import TimeLine      from 'ui/timeline';
import About         from 'ui/about'
import Contact       from 'ui/contact'

ReactDOM.render((
  <Provider store={store}>
    <Router history={browserHistory}>

        <Route component={App}>
            <Route path="/" component={Portfolio} />
            <Route path="/blog" component={BlogContainer} />
            <Route path="/timeline" component={TimeLine} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
        </Route>

    </Router>
  </Provider>
), document.getElementById('root'));

知道如何解決它。

Note: dependencies I am using
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "^4.0.6",
    "react-router": "^2.0.0",
    "redux": "^3.3.1"

Answer 1

問題是您的服務器路由器（nginx，Apache ...）不知道要返回什么以及要向瀏覽器提供什么內容。 基本上，如果你的應用程序只是你已經捆綁的前端應用程序，承認你正在使用nginx，你需要為你的服務器配置這種配置：

server {

    location / {
        try_files $uri /your/index.html; # the path to your html page
    }
} 

然后，當您嘗試直接轉到路徑時，您的服務器將始終返回包含您的javascript包的html頁面，並且react-router應該處理其余的。

請參閱react-router文檔中的此解釋

Answer 2

從您的路線中刪除“/”。 直接調用組件。 例如：{

<Route component={ App } path='/master'>
        <Route path = 'board' component={BoardView} />
        <Route  path = 'team'  component={View} />
        <Route path = 'all' component={All} />
        <Route path = 'shots' component={Shots} />
        <Route path = 'home' component={Home} />
        <Route path = 'topper' component={Toppers} />
        <Route path = 'overlay' component={Overlay} />
        <Route path = 'earn' component={Earn} />

}