Reactjs 反应路由器：路由呈现两个组件

我的react应用程序中有以下路径：

<Route exact path="/" component={HomeScreen} />
<Route exact path="/:category" component={HomeScreen} />
<Route exact path="/:category/:id" component={PostDetailScreen} />
<Route exact path="/posts/new" component={CreatePostScreen} />

当我转到/posts/new时，我的应用程序不仅会呈现CreatePostScreen，还会呈现PostDetailScreen。我认为它解释为：category=posts和：id=new

---

然而，我被卡住了。我做错了什么？我只想让/posts/new route呈现CreatePostScreen。

React路由器将“posts”解释为一个类别，“new”解释为ID

更改管线组件的顺序，然后使用组件，如下所示：

<Switch>
    <Route exact path="/" component={HomeScreen} />
    <Route exact path="/posts/new" component={CreatePostScreen} />
    <Route exact path="/:category" component={HomeScreen} />
    <Route exact path="/:category/:id" component={PostDetailScreen} />
</Switch>

试试这个

<Switch>
  <Route exact path="/" component={HomeScreen} />
  <Route exact path="/posts/new" component={CreatePostScreen} />
  <Route exact path="/:category" component={HomeScreen} />
  <Route exact path="/:category/:id" component={PostDetailScreen} />
</Switch>

/posts/new

是满足

/：category/：id

的有效路径，即您的类别是

posts

id是

new

---

将路由放置在

中会呈现第一个匹配的路由，更多信息请参见此处

真棒！确实如此！谢谢！如果使用“精确”，则不应同时呈现两个组件，也请检查此项