React router not working with params

Question

I have the following setup:

<div>
    <Router history={browserHistory}>
        <Route path="/" component={NewCustomerContainer} />
        <Route path="/newCustomer" component={NewCustomerContainer} />
        <Route path="/search" component={SearchPageContainer} />
        <Route path="/network" component={NetworkContainer} />
        <Route path="/network/:id" component={NetworkContainer} ></Route>
    </Router>
</div>

The route http://localhost:8100/network works fine. The route http://localhost:8100/network/abc123 does not with a 404 error appearing in my console. Anyone seen anything like this before?

Solution 1

<div>
    <Router history={browserHistory}>
        <Route path="/" component={NewCustomerContainer} />
        <Route path="/newCustomer" component={NewCustomerContainer} />
        <Route path="/search" component={SearchPageContainer} />
        <Route path="/network" component={NetworkMetaContainer}>
            <Route path="/:id" component={NetworkContainer}/>
        </Route>
    </Router>
</div>

You forgot to nest the the '/id' inside the network Route. React Router allows for nested routing by placing Routes inside other Routes... If you have all network/id stuff inside the network and the network renders its children then this will work correctly.

The new NetworkMetaContainer will need to be built that has a simple render children... or if you want you can perhaps have a <IndexRoute /> inside the network Route, but either way the NetworkMetaContainer thing must be just the outer wrapper (maybe it'll have the different tabs or links or possibilities inside the Network)?

Solution 2

Something else to try is to add a

<base href="/">

tag inside the head tags of your base HTML page.

Solution 3

try to add prop exact={true} inside Route component

<div>
    <Router history={browserHistory}>
        <Route path="/" component={NewCustomerContainer} />
        <Route path="/newCustomer" component={NewCustomerContainer} />
        <Route path="/search" component={SearchPageContainer} />
        <Route path="/network" exact={true} component={NetworkContainer} />
        <Route path="/network/:id" exact={true} component={NetworkContainer} ></Route>
    </Router>
</div>

Comments

[John Devitt]

This + changing http://localhost:8100/network/abc123 -> http://localhost:8100/networkabc123 worked a charm! Thanks!

[Diego Fortes]

Oh, wow. This actually worked for me. Thanks! Why does it work though?

[samAlvin]

it works for me too! in my case it works because if the base url is not set, it will try to load the resource files using the defined path (the path having params) as the base url..

[Danys Chalifour]

I had to redeclare for it to work on my end; <Route path="/jobs" component={Job} > <Route path="/jobs/:jobTab" component={Job} /> </Route>

[m01010011]

Works for me using react-router-dom v5.2.0