React routing, path not working, bundle not found

Question

The following route works great and displays the AdministratePage component:

 <Route path="/admin" component={AdministratePage} />

However this route:

 <Route path="/admin/all" component={AdministratePage} />

...results in the following error:

http://localhost:8080/admin/bundle.js 404 (Not Found)

Where do I go wrong? Am I not allowed to use any path?

I'm using react-router-dom 4.1.2.

My webpack.config.js :

  output: {
        path: path.resolve('dist'),
        filename: '/bundle.js'
    },

My index.html:

   <div id="app"></div>

Thank you.

Answer 1

Slash looks useless here

filename: '/bundle.js'

Also try to define publicPath

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

https://webpack.js.org/guides/public-path/

Answer 2

Another way of solving this problem is to add the following tag to your index.html page:

<base href="/">

Answer 3

React-router v4 now allows you to use regexes to match params

<Route path="/admin/all | /admin" component={AdministratePage} />

It uses path-to-regexp

path-to-regexp