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 ?

Answer 1

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 !