URL 格式的 React Router URL 参数答案

【问题标题】：React Router URL parameter in URL formatURL 格式的 React Router URL 参数
【发布时间】：2021-11-19 16:40:31
【问题描述】：

不知道如何真正表达这个问题，但我已经尝试过但无法正确地做到这一点。我将假设我必须使用某种正则表达式，但我之前的尝试再次失败了。

我想做的是在特定路由上使用反应路由器，但我希望 URL 参数本身是路径。例如。我想要类似的东西

<HashRouter>
  <Switch>
    <Route path="/page/:thePath" component={ThePageComponent} />
  </Switch>
</HashRouter>

因此，如果我访问 http://localhost:9000/#/page/some/random/path/here 之类的路径，我可以加载 ThePageComponent 并访问 URL 参数以获取 /some/random/path 但似乎不是当我尝试设置时能够找到路线。

谁能指出我正确的文档方向，以便我可以学习如何做到这一点？我对 react 和 react-router 比较陌生，所以我可能会遗漏一些简单的东西，但我一生都无法弄清楚。

谢谢

根据下面接受的答案，我能够让它工作。它与我在示例中的内容略有不同，但仍然有效

<HashRouter>
  <Routes>
    <Route path="/*" element={<App/>} />
  </Routes>
</HashRouter>

然后在我的 App 组件中

const parameters= useParams();
console.log("params ", parameters)

所以访问http://localhost:9000/#/Logic1/Testing会得到如下payload

{
    "*": "Logic1/Testing"
}

【问题讨论】：

【解决方案1】：

使用路径末尾的one-or-more parameter + 匹配到路径末尾的thePath 匹配参数。

<Route path="/page/:thePath+" component={ThePageComponent} />

演示

如果您想了解更多关于path 匹配的知识，RRDv5 使用path-to-regex@v1.7.0 将指定的路径字符串转换为用于路由匹配的正则表达式。

【讨论】：