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 (e.g. 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 ponent={App}>
            <Route path="/" ponent={Portfolio} />
            <Route path="/blog" ponent={BlogContainer} />
            <Route path="/timeline" ponent={TimeLine} />
            <Route path="/about" ponent={About} />
            <Route path="/contact" ponent={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"

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 (e.g. 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 ponent={App}>
            <Route path="/" ponent={Portfolio} />
            <Route path="/blog" ponent={BlogContainer} />
            <Route path="/timeline" ponent={TimeLine} />
            <Route path="/about" ponent={About} />
            <Route path="/contact" ponent={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"

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Apr 13, 2016 at 9:39 gon250 asked Apr 13, 2016 at 9:28 gon250gon250 3,54577 gold badges4646 silver badges7676 bronze badges 5

• Can you show us the lines before ReactDOM.render ? – martpie Commented Apr 13, 2016 at 9:36
• add an <IndexRoute ponent={Portfolio} />, also remove '/' from routes except for root path. – Marius Darila Commented Apr 13, 2016 at 9:41
• 1 Could you replace browserHistory by hashHistory and try #/your-route urls, just for test purposes – martpie Commented Apr 13, 2016 at 9:57
• @KeitIG I made the change you said and it's working, but now the path looks like localhost:8000/#/blog?_k=h779se and not like localhost:8000/blog is there any way to keep the path clean? – gon250 Commented Apr 13, 2016 at 12:24
• Yep, that was just a test to know what were the problem, I'll try to post an answer soon – martpie Commented Apr 13, 2016 at 15:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

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

}