如何防止反应路由器dom嵌套路由与路由参数混淆

Question

我有两条不同的路由，它们应该返回两个不同的组件：

显示表单以创建新帖子的途径：

<Route exact path='/posts/new'
render={(props) => <NewPost
{...props}
/>}/>

以及通过id:显示帖子的另一条路线

<Route exact path='/posts/:id'
render={(props) => <ShowPost
{...props}
/>}/>

问题是，当我尝试访问/posts/new时，我会用参数"；新的"；。

ps。我必须保持路线的命名惯例，因为我在嘲笑一个非SPA网站，为了SEO，链接应该是一样的。

我该如何解决这个问题？

Answer 1

在Switch组件中包裹路由，确保/posts/new位于另一个之上。(Switch渲染与位置匹配的第一个子项(。

import {Switch} from "react-router-dom";
<Switch>
<Route exact path='/posts/new'
render={(props) => <NewPost
{...props}
/>}/>
<Route exact path='/posts/:id'
render={(props) => <ShowPost
{...props}
/>}/>
</Switch>