反应路由器 v6 |获取模板位置答案

【问题标题】：React-Router v6 | Getting Template Location反应路由器 v6 |获取模板位置
【发布时间】：2021-12-08 15:08:52
【问题描述】：

我正在使用 React Router v6，并且我有这些路由（仅针对这个问题）：

return (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="about" element={<AboutPage />} />
      <Route path="items" element={<AllItemsPage />} />
      <Route path="items/:id" element={<ItemPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  </BrowserRouter>
);

现在，我想在<ItemPage /> 组件中获取模板路径items/:id。

目前，当我使用 useLocation() 挂钩时，我得到了路径名，例如 items/2，我需要模板和路径名。

版本

反应：^17.0.2
React Router DOM：^6.0.2

【问题讨论】：

当您说“模板”时，您是指模式吗？ RRDv6 似乎没有向子组件公开路由路径模式。这里的用例是什么，您要解决什么问题？您是否正在尝试构建嵌套链接/路由，例如在 v5 中使用 path 和 url 属性的 useRoutedMatch 挂钩？

标签： reactjs react-router react-router-dom

【解决方案1】：

查看 React router v6 API 文档，AFAIK 没有提供直接获取模板的方法。

您最好的选择是将道具传递给您的组件，例如

<Route path="items/:id" element={<ItemPage pattern="items/:id"/>} />

最好将模板存储在一个对象中

const paths = {
  home: "/",
  ...
  items: "items/:id"
}
...
<Route path={paths.items} element={<ItemPage pattern={paths.items}/>} />

【讨论】：