React-router错误直接通过路径访问或刷新页面

Question

I have implemented react-router without any problem, it's working properly, but for some reason in the case an user refresh the page or try to access directly to a different page of the main one by the path i'm getting an error like Cannot GET /whatever (eg Cannot GET /blog).

Below is the code:

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'));

Any idea how can I fix it.

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

The problem is that your server router (nginx, Apache...) does not know what to return and what content to deliver to your browser. Basically, if your app is only a front end app that you have already bundled, admitting you're using nginx, you need this kind of config for your server:

server {

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

Then, when you will try to go directly to a route, your server will always return the html page containing your javascript bundle, and react-router should handle the rest.

See the this explanation in the docs of react-router

Answer 2

Remove '/' from your routes. Directly call component. Eg: {

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

}