React - react-router-dom two Route conflict

Question

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} />

Answer 1

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.