React Router如何配置路由将嵌套路径作为URL参数匹配获取

问题背景 #

我不清楚该如何准确表述这个问题，多次尝试都没能正确实现需求，猜测需要使用正则表达式匹配，但此前的相关尝试均未成功。
我的需求是使用React Router配置指定路由，将URL中路由后的嵌套路径整体作为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 Router 支持通过路由通配符*匹配任意层级的嵌套路径，无需手动写正则匹配，具体实现步骤如下：

1. 调整路由配置，将需要匹配嵌套路径的路由规则末尾加上*：

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

如果仅需要匹配/page前缀下的所有嵌套路径，可将path改为/page/*即可。
2. 在目标组件中调用useParams钩子获取匹配到的路径：

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

当访问 http://localhost:9000/#/Logic1/Testing 时，最终获取到的参数结构如下：

{
    "*": "Logic1/Testing"
}

内容的提问来源于stack exchange，提问作者dcvoidist