Support webpack-dev-server historyApiFallback: true

Hi I don’t know exactly is this issue with webpack but i think so I have simple config for router

var ReactappApp = require('./ReactappApp');
var HelloWorld = require('./HelloWorld');
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;


var content = document.getElementById('content');

var Routes = (
  <Route path="/" handler={ReactappApp}>
    <Route name="hello" path="hello" handler={HelloWorld}/>
  </Route>
);
console.log(Routes);
Router.run(Routes,Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, content);
});

So i try to load HelloWorld component at /hello and get Cannot GET /hello So server doesn’t see this route

I use grunt and connect also. Here is grunt task for webpack:

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

and here is webpack config https://gist.github.com/fellz/b2cc0de81c7b1f5bf442#file-webpack-config

with historyApiFallback: true

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

it’s loading ReactappApp instead of HelloWorld

p.s. react-router-component works as expected and perfectly well

[BenFlanagan]

I’ve been struggling with this for longer than I’d like to admit, but I’ve just figured it out.

Besides enabling historyApiFallback, if you’re having trouble only with nested routes, check your html file’s reference to your script.

In my case, it was the difference between <script src="/bundle.js"></script> and <script src="bundle.js"></script> causing problems on nested routes. Basic stuff, and super obvious now that I’ve found it, but it was easy to miss.

Thanks to @adrianmacneil for the sample app, it was a big help.

edit - “/bundle.js” being the correct src, so the reference isn’t taken as relative to the current path.

[amacneil]

Some of the examples above are very complicated. In most cases you can get this working simply by adding the following lines to your webpack.config.js file:

devServer: {
  historyApiFallback: true
}

I made an example app to help anyone else looking for a solution to this (like I was).