React Router v4 — nested routes not work with webpack-dev-server

We built the route based on react-router in React, and tried to move away from react-admin. I had this issue which the route /loading worked fine but not the /loading/test . There were issues with the nested route.

<PrivateRoute exact path="/loading" component={Loading} /><PrivateRoute exact path="/loading/test" component={Loading} />

I saw this in the network tab. The request url should be http://localhost:3000/main.bundle.js , but the request url changed when route was nested route /loading/test

This was a real pain but I found out a solution and it worked like a charm

In webpack.dev.js , I added the following

output: {
    publicPath: '/'
},
devServer: {
    historyApiFallback: true
}

React Router v4 nested routes not work with webpack-dev-server

The next challenge would be for the production and hopefully it will work the same.