React Router V4 - Rendering Two Components On Same Route

I have these routes When I navigat

Solution 1:

/create matches /:id, so it makes sense that this route matches. I recommend forcing :id to look for numeric only:

<Routeexactpath={`/admin/caters/:id(\\d+)`} component={Cater} /><Routeexactpath={'/admin/caters/create'} component={CreateCater} />

Likewise, you can follow @jabsatz's recommendation, use a switch, and have it match the first route that matches. In this case, you would need to ensure that the /admin/caters/create route is the first <Route /> element matched.

Solution 2:

The problem is that :id is matching with create (so, it thinks "see cater with id create"). The way to solve this is to put the wildcard matching route last, and wrapping all the <Routes/> with a <Switch/>, so it only renders the first hit.

Check out the docs if you have any more questions: https://reacttraining.com/react-router/core/api/Switch