为什么两条路由在具有不同路径链接的反应js中调用同一页面答案

【问题标题】：why two routes calling same page in react js that has different path link为什么两条路由在具有不同路径链接的反应js中调用同一页面
【发布时间】：2021-07-10 07:47:39
【问题描述】：

${process.env.PUBLIC_URL}/book-repair/:name/:name} 组件={Modals}/> ${process.env.PUBLIC_URL}/book-repair/:name} 组件={公司}/>

当调用第二条路线时，这非常好。但是当我打电话给第一条路线时，第一条路线和第二条路线都在打电话。请解决我的问题。

【问题讨论】：

什么在呼唤或被呼唤？ Route 组件不调用事物。这些路线在哪里渲染？
你应该添加exact单独调用。

标签： reactjs react-router-dom

【解决方案1】：

使用Switch独家渲染路由，使用exact严格匹配模式

import { Route, Switch } from "react-router";

let routes = (
  <Switch>
    <Route path={${process.env.PUBLIC_URL}/book-repair/:name/:name} component={Modals} exact />
    <Route path={${process.env.PUBLIC_URL}/book-repair/:name} component={Companies} exact />
  </Switch>
);

参考：https://reactrouter.com/web/api/Switch

【讨论】：

我已经使用 switch 或完整的路由语法来渲染路由。但问题是当我点击第二条路线的链接时，两条路线都被调用，您可以在下面看到。

【解决方案2】：

    <Switch><Route path={${process.env.PUBLIC_URL}/book-repair/:name/:name} exact component={Modals}/> 
<Route path={${process.env.PUBLIC_URL}/book-repair/:name} exact component={Companies}/> </Switch>

您应该将 exact 和 Switch 添加到您的路线中。

【讨论】：

【解决方案3】：

如果您将路由渲染为Router，则它们都可以匹配和渲染。 Router inclusivley 匹配并呈现路线。使用 exact 属性完全匹配其中一个。问题是${process.env.PUBLIC_URL}/book-repair/:name 是${process.env.PUBLIC_URL}/book-repair/:name/:name 的前缀，因此也会被匹配。

<Route
  exact
  path={`${process.env.PUBLIC_URL}/book-repair/:name/:name`}
  component={Modals}
/>
<Route
  exact
  path={`${process.env.PUBLIC_URL}/book-repair/:name`}
  component={Companies}
/>

另一种方法是将路由渲染为Switch 以独家匹配并渲染路由。这里路径顺序和特异性很重要。按从最具体到最不具体的顺序排列您的路线。您无需指定 exact 属性，因为 Switch 仅匹配并呈现第一个匹配的 Route。

<Switch>
  ...
  <Route
    path={`${process.env.PUBLIC_URL}/book-repair/:name/:name`}
    component={Modals}
  />
  <Route
    path={`${process.env.PUBLIC_URL}/book-repair/:name`}
    component={Companies}
  />
  ...
</Switch>

【讨论】：