React routing optional parameter not working (react-router-dom: version 4.1.2)

Question

My AdministratePage shows a collection of users. In order to administrate a given user I'm trying to apply an optional parameter, like so:

import { Router, Route } from 'react-router-dom';

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

The route /admin works fine and shows the AdministratePage. However using a parameter eg /admin/abc results in a blank page.

I also tried the following syntax:

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

.. without luck.

My AdministratePage is not yet configured for filtering, so it should just display all users for the moment.

For what it's worth: my webpack.config.js contains:

 devServer: {
        historyApiFallback: true
    }

I'm using "react-router-dom": "^4.1.2". Thank you.

Answer 1

Try this

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

Answer 2

The actual problem was that the bundle was not found.

See React routing, path not working, bundle not found. I hope it might help somebody.

Answer 3

Make sure that in your index.html you are using an absolute path for the bundle.js, as <script src="/bundle.js" /> and not <script src="bundle.js" />