反应 - react-router-dom两个路由冲突

Question

这是我的两个路由，当我导航到/ blogs/new BlogsShow Component也在运行。如何防止这一点。

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

Answer 1

裹在<Switch>组件和匹配将使专门第一个这两个路线。

例如是这样的：

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

// ...code 

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

欲了解更多详情，请参见他们的documentation。