Question

我有以下2条路线：

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

每次我单击版本说明导航到版本说明页面时，都会从Page2组件的控制台中收到错误消息。当我要导航到版本说明页面时，如何防止呼叫Page2？

Answer 1

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

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

在此配置中，如果路由与'/imprint'相匹配，它将不触发'/:id'路由。即使id是字符串，也可以使用。（自然，您必须确保从未遇到id === 'imprint'案件。）

Answer 2

如果id是一个数字，那么您可以尝试使用Regex：

    <RouteEx exact path="/:id(\d+)" component={Page2}/>
    <RouteEx exact path="/imprint" component={Imprint}/>

React Router，两个具有相似网址的路由

2 个答案: