webpack-dev-server react-router push state

Question

I am trying to get react-router to work with webpack-dev-server but keep getting cannot Get /SOMEURL. This is because webpack-dev-server is looking for that specific file but cannot find it. I'd like webpack to resort to using react-router vs searching for the files itself.

How can I set that up?

My grunt:

'webpack-dev-server': {
      options: {
        hot: true,
        port: 8000,
        webpack: webpackDevConfig,
        publicPath: '/assets/',
        contentBase: './<%= pkg.src %>/'
      },

      start: {
        keepAlive: true,
      }
    },

Answer 1

For me, i had this in my index file:

<script src="./assets/app.js"></script>

rather than

 <script src="/assets/app.js"></script>

So, it looks like the history fallback API was in competition with my misconfiguration.

Answer 2

Use the --history-api-fallback option to webpack-dev-server. This uses connect-history-api-fallback to serve up index.html if the route doesn't match any other files. (This does mean you have to use index.html as the filename for your HTML page.)