HashHistory vs. BrowserHistory

Question

I am using Node with Webpack-Dev-Server and React-Router.

In my app.js file I have:

<Router history={browserHistory}>
  <Route path="/" component={Layout}>
    <IndexRoute component={FindFriends} />
    <Route path="/you" component={YouAndYourFriends} />
  </Route>
</Router>

Using browserHistory the browser returns an error: Cannot GET /you

When I change browserHistory to hashHistory, everything works fine.

Where is my mistake? Or what should you do using browserHistory?

I believe that the problem is that the node server needs help to support pushState. Webpack puts everything into one bundle, and node doesn't recognize that sub-pages should be served with the same file. If you scrutinize the output, you should see a message telling you to install pushstate: https://www.npmjs.com/package/pushstate-server — Joshua Engel, Dec 13 '16 at 20:49
See http://stackoverflow.com/questions/36289683/what-is-the-difference-between-hashhistory-and-browserhistory-in-react-router — Maninacan, Dec 13 '16 at 20:53
https://www.youtube.com/watch?v=eofpZPRUnP8&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=16 — Timo, Dec 14 '16 at 16:32

score 3 · Answer 1 · answered Dec 13 '16 at 21:14

I had this problem. Solved it by adding the following to my webpack.config.js

devServer: {
  historyApiFallback: true,
  contentBase: path.join(__dirname, "dist"), // Not Related but important
}

You can also toggle this option via the command-line: https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

In my case, I got it working by putting it in the config file.

Good luck !

HashHistory vs. BrowserHistory

1 Answers1