React Router：路由呈現兩個組件

Question

我的應用程式中有以下路線：

<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路由渲染CreatePostScreen。

Answer 1

React路由器將“帖子”解釋為類別，將“新”解釋為ID。

更改Route組件的順序，並使用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>

Answer 2

嘗試這個

<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

在<Switch>放置路由會呈現第一個匹配的路由，更多信息請參見https://reacttraining.com/react-router/web/api/Switch