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

Question

I try to setup nested routes for my react app like this

• / -> Home Page
• /about -> About Page
• /protected

Answer 1

To summarized the answer by @Bing Lu, in your webpack.config.js file:

module.exports = () => ({
  mode: 'development',
  entry: ...,
  ...,
  output: {
    ...
    publicPath: '/' // <- this is the important line along with historyApiFallback = true in the dev server config
  },
  ...,
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    historyApiFallback: true,
    compress: true,
    ...
  },
})