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

【问题标题】：leading optional path parameters in React Router v6React Router v6 中的前导可选路径参数
【发布时间】：2022-01-21 12:01:45
【问题描述】：

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

/:locale?/:city?/mobile

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

如何在 v6 中重构这些？

【问题讨论】：

标签： reactjs react-router react-router-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 />} />

【讨论】：

我以一条路线为例，其实路线很多
任何带有可选参数的路由都需要遵循同样的模式。