React Router Error - Cannot GET [Page Name]

Question

As I am digging into React I am finding a need for the router. I am following along with Wes Bos' video series but am hitting a snag when I try to access any route other than my root.

import ReactRouter from 'react-router';
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
var createBrowserHistory = require('history/lib/createBrowserHistory');

Then my router

var routes = (
  <Router history={createBrowserHistory()}>
    <Route path="/" component={LoginPage} />
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/search" component={SearchPage} />
    <Route path="/details" component={DetailsPage} />
    <Route path="*" component={LoginPage} />
  </Router>
);
ReactDOM.render(routes, document.getElementById('content'));

However, if I go to localhost:3000/dashboard I am given the error:

Cannot GET /dashboard

Any advice?

Answer 1

Add this to webpack.config.js

  devServer: {
      historyApiFallback: true
  }

Answer 2

You need to configure your server appropriately when using browser history: https://github.com/rackt/react-router/blob/v1.0.3/docs/guides/basics/Histories.md#configuring-your-server.

If you're using the webpack dev server, enable historyApiFallback.