React 路由器：路由渲染两个组件

Question

我的 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 路由呈现 CreatePostScreen。

Answer 1

React router 将“posts”解释为类别，将“new”解释为 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

React 路由器：路由渲染两个组件

React router: route renders two components

reactjs

react-router

react-router-v4