React Router v6 中的前导可选路径参数

Posted 2023-02-21

【中文标题】React Router v6 中的前导可选路径参数

【英文标题】：leading optional path parameters in React Router v6

【发布时间】：2022-01-21 12:01:45

【问题描述】：

在 v5 中，我使用下一个路径正则表达式：

/:locale?/:city?/mobile

在 v6 中它不起作用。尝试在path prop 中使用数组，但不支持

如何在 v6 中重构这些？

【参考方案1】：

查看这个 Github 问题：https://github.com/remix-run/react-router/issues/7285

React Router v6 显然不再支持可选参数。相反，您需要为每个参数组合创建一个路由。在你的情况下，我认为它可能看起来像这样：

<Route path="/:locale">
    <Route path="/:city" element=<Page /> />
    <Route path="" element=<Page /> />
</Route>
<Route path="/:mobile" element=<Page /> />

【讨论】：

我以一条路线为例，其实路线很多

任何带有可选参数的路由都需要遵循同样的模式。