React - react-router-dom 两个Route冲突

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>

有关详细信息，请参阅他们的 documentation。

React - react-router-dom 两个Route冲突

React - react-router-dom two Route conflict

reactjs

react-router-dom