React Router 中同一组件的多个路径名答案

【问题标题】：Multiple path names for a same component in React RouterReact Router 中同一组件的多个路径名
【发布时间】：2017-03-25 07:56:17
【问题描述】：

我在三个不同的路线上使用相同的组件：

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

有没有办法把它结合起来，就像：

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

【问题讨论】：

标签： javascript reactjs path react-router url-routing

【解决方案1】：

从 react-router v4.4.0-beta.4 开始，正式在 v5.0.0 中，您现在可以指定解析为组件的路径数组，例如

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

数组中的每条路径都是一个正则表达式字符串。

这种方法的文档可以在here找到。

【讨论】：

我相信这是最好的答案。 @Cameron 的答案无论如何都不支持完整的正则表达式功能（至少我做不到）。
如何为单个路径设置exact属性？
@JulianSoto 创建一个到具有单个路径和确切路径的组件的路由。然后，您可以使用没有确切属性的路径数组创建另一个到同一组件的 Route。
我不能 yarn upgrade 从 4.3 到 4.4。正式发布了吗？
@ndtreviv 查看反应路由器更改日志，我可以看到该功能已在 v4.4.0 Beta 4 中推出。我建议升级到最新版本，在撰写本文时是v5.5.0。您可以通过运行“yarn upgrade react-router --latest”来执行此操作

【解决方案2】：

至少在 react-router v4 中，path 可以是正则表达式字符串，所以你可以这样做：

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

如您所见，它有点冗长，所以如果您的 component/route 像这样简单，那可能不值得。

当然，如果这确实经常出现，您总是可以创建一个包装组件，该组件接受一个数组 paths 参数，它可以重复使用正则表达式或 .map 逻辑。

【讨论】：

好主意@Cameron。我发现对其进行一些修改以仅匹配以以下组之一开头的路径很有用：/^\/(home|users|widgets)/ 现在，/widgets 将匹配，但 /dashboard/widgets 将不匹配。
应该很好，但是现在类型正则表达式在 prop-types 验证中无效：regexp 类型的 Warning: Failed prop type: Invalid prop path` 提供给 Route，预期 string。`
@FábioPaiva 是的，我还没有弄清楚如何在路由中放置任意正则表达式
以字符串形式输入<Route path="/(new|edit)/user/:id?" ... />
不适用于path={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

【解决方案3】：

如果您使用低于 v4 的 React Router 版本，我认为不会。

你可以使用map，就像你对任何其他 JSX 组件所做的那样：

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

编辑

只要path-to-regexp 支持，您也可以对路径in react-router v4 使用正则表达式。有关更多信息，请参阅@Cameron 的答案。

【讨论】：

别忘了key 属性。
请注意，当从路径切换时（例如 /home => /users 在该示例中），这会导致（不希望的...？）重新挂载
确实！可取性可能取决于您的用例和组件。如果您不想重新挂载，使用我的编辑中指出的正则表达式可能会更好。
另外，如果添加了exact，请不要忘记删除。

【解决方案4】：

从 react-route-dom v5.1.2 开始，您可以传递多个路径，如下所示

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

而且显然你需要在顶部导入 Home jsx 文件。

【讨论】：

有效！但我收到警告：失败的道具类型：无效的道具path 提供给Route。
@AzizStark 你是对的，这不是一个正确的答案。最好使用<Route path={["/home", "/users", "/widgets"]} component={Home} /> 作为解决方案。
这个字符串的单管道语法是什么？到处都找不到。

【解决方案5】：

其他选项：使用路由前缀。 /pages 例如。你会得到

/pages/home
/pages/users
/pages/widgets

然后在Home组件内详细解析。

<Router>
  <Route path="/pages/" component={Home} />
</Router>

【讨论】：

【解决方案6】：

从 react router v6 开始，他们删除了正则表达式的选项，根据类型定义，它又是path: string。目前，您必须再次拼出每条路径或使用地图为方便起见：

<Routes>
    {('home', 'users', 'widgets').map(path => <Route path={path} component={Home} />)}
</Routes>

另见https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns

【讨论】：

【解决方案7】：

根据 React Router 文档，proptype 'path' 是 string 类型。因此，您无法将数组作为 props 传递给 Route 组件。

如果您的意图只是改变路线，您可以将相同的组件用于不同的路线，这没有问题

【讨论】：

这个答案不再正确，因为 path 现在接受一个字符串数组。看到这个answer。

【解决方案8】：

使用 react-router v6，您可以这样做：

<Routes>
  {['path1', 'path2'].map((path) => (
            <Route path={path} element={<SomeComponent />} />
  ))}
</Routes>

【讨论】：