React-react-router-dom两个路由冲突

Question

这是我的两条路线，当我导航到/ blogs / new BlogsShow组件时，它也正在运行。如何预防。

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

有关更多详细信息，请参见其文档。