React - react-router-dom two Route conflict

user_1223591 0
Viewed 1866

Here is my two Route and when I am navigate to /blogs/new BlogsShow Component also running. How to prevent that.

<Route path="/blogs/new" component={BlogsNew} />
<Route path="/blogs/:id" component={BlogsShow} />
react-router-dom reactjs
1 Answers

Wrap those two routes in a <Switch> component and the first one that matches will render exclusively.

For example something like this:

import { Switch, Route } from 'react-router-dom';

// ...code

<Switch>
    <Route path="/blogs/new" component={BlogsNew} />
    <Route path="/blogs/:id" component={BlogsShow} />
</Switch>

For more details see their documentation.

user_44352700
Related