React nested route fails to load on refresh

Question

I have a React app with navigation powered by react-router that I run in development with webpack-dev-server and the history fallback option enabled. H

Answer 1

For those who have tried the above and stil have issues, I'm using html-webpack-plugin on my webpack configuration, so it injects the bundle inside the HTML with no need to add any script import on index.html

So I removed the following line from my index.html file:

And added the following configuration on webpack plugins section:

// some other imports 
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
...
webpack default config
...

plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      hash: true,
      inject: true,
    }),
    ...
    other plugins,
  ],

}

Just remember to also use the output configuration accordingly to your project, such as mine:

output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: 'bundle.js',
  },