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

IT技术 javascript reactjs path react-router url-routing
2021-02-08 06:59:33

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

<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>
6个回答

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

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

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

可以在此处找到此方法的文档。

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

至少对于 react-router v4，它path可以是一个正则表达式字符串，所以你可以做这样的事情：

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

正如你所看到的，它有点冗长，所以如果你的component/route像这样简单，它可能不值得。

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

应该很棒，但目前正则表达式类型在 prop-types 验证中无效：Warning: Failed prop type: Invalid prop path` of type provided regexpto Route, expected string.`
2021-03-20 06:59:33
@FábioPaiva 是的，我仍然没有想出如何在路由中放置任意正则表达式
2021-03-24 06:59:33
不与 path={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}
2021-03-24 06:59:33
好主意@Cameron。我发现稍微修改它以仅匹配以其中一个组开头的路径很有用：/^\/(home|users|widgets)/ 现在，/widgets将匹配，但/dashboard/widgets不会匹配。
2021-03-28 06:59:33
把它作为一个字符串 <Route path="/(new|edit)/user/:id?" ... />
2021-04-02 06:59:33

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

您可以map像使用任何其他 JSX 组件一样使用 a ：

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

编辑

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

的确！可取性可能取决于您的用例和组件。如果您不想重新安装，按照我的编辑中的指示使用正则表达式可能会更好。
2021-03-17 06:59:33
另外，exact如果添加，请不要忘记删除。
2021-03-23 06:59:33
请注意，这会导致（不希望的......？）从路径切换时重新安装（例如 /home => /users 在该示例中）
2021-03-25 06:59:33
不要忘记key道具。
2021-03-30 06:59:33

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

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

显然，您需要在顶部导入 Home jsx 文件。

有用！但我收到警告：道具类型失败：path提供给 的道具无效Route。
2021-03-23 06:59:33
@AzizStark 您说得对，这不是正确答案。您最好将其<Route path={["/home", "/users", "/widgets"]} component={Home} />用作解决方案。
2021-03-30 06:59:33
字符串的这种单管道语法是什么？在任何地方都找不到它。
2021-04-04 06:59:33

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

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

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

<Router>
  <Route path="/pages/" component={Home} />
</Router>
其它你可能感兴趣的问题
上一篇如何找到对象的键？ 下一篇moment.js - UTC 给出错误的日期