时间戳

首页 > 解决方案 > React Router，2 个具有相似 url 的路由

reactjs - React Router，2 个具有相似 url 的路由

问题描述

我有以下两条路线：

<RouteEx path="/:id" component={Page2} />
<RouteEx path="/imprint" component={Imprint} />

每次我单击印记导航到我的印记页面时，我的控制台中都会出现来自 Page2 组件的错误。当我想导航到 Imprint 页面时，如何防止调用 Page2？

标签： reactjsreact-router

解决方案

React-Router 文档的“路由匹配”部分提供了一些处理路由的工具，这些路由都可以作为地址文本的匹配项。第一个是<Switch>，这使得只有一个路由 - 第一个匹配，即使有很多 - 响应路由匹配。另一个是exact属性，它保证路由不会被灵活解释。在您的情况下，您可以同时使用它们（尽管我认为exact在您的情况下可能不需要该标签）：

<Switch>
  <RouteEx exact path="/imprint" component={Imprint} />
  <RouteEx path="/:id" component={Page2} /> 
</Switch>

在此配置中，如果路由匹配'/imprint'，则不会触发'/:id'路由。即使它id是一个字符串，这也将起作用。（当然，你必须确保你永远不会遇到这种情况id === 'imprint'。）

推荐阅读