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?

Answer 1

Something else to try is to add a

<base href="/">

tag inside the head tags of your base HTML page.

Answer 2

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

Answer 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>