React router not working with params

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?

Answer

<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)?

Leave a Reply

Your email address will not be published. Required fields are marked *