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>

Answer 4

Asuming you are using react-router-dom https://reactrouter.com/web/guides/primary-components

Put your more specific route before the other:

<Route path="/posts/:id" exact>
  <Post />
</Route>
<Route path="/posts">
  <Posts />
</Route>

Note how these two routes are ordered. The more specific path="/contact/:id" comes before path="/contact" so that route will render when viewing an individual contact

Answer 5

Base href didn't work for me. This did though:

<Router history={browserHistory}>
   <Route path={['/network/:id', '/network']} component={NetworkContainer} />
</Router>