React - 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。