React router v6 访问路由外参数的最简单方法

Question

<Menu/>

<Routes>
<Route path="/" element={<HomeView />} />
<Route path="/website/:Id" element={<WebsiteView />} />
</Routes>

从 Menu 组件访问 Id 参数的最简单方法是什么？

UseParams 只能在路由渲染的元素中使用。

我目前正在这样做：

const location = useLocation();

const Id = location.pathname.split("/")[2]

然而，我认为这对我来说还不够严格。我想要用反应方式检索 Id Param - 请不要花哨的解决方案，这是最简单的方法。

Answer 1

您可以使用matchPath：

反应路由器 v6：

const match = matchPath({ path: "/users/:id" }, "/users/123");

反应路由器 v5：

const match = matchPath("/users/123", {
  path: "/users/:id",
  exact: true,
  strict: false
});