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} />

}