反应路由器两个 URL 参数及更多答案

【问题标题】：React router two URL parameters &more反应路由器两个 URL 参数及更多
【发布时间】：2020-10-12 13:06:27
【问题描述】：

我正在使用 react-router-dom，目前它是这样的：

<Switch>
        <Route path={"/layouts/:layoutID"} component={Layouts} />
        <Route
          path={"/dashboard/:dashboardID"}
          component={Dashboards}
        />
</Switch>

当用户导航到此组件内的“/dashboard/:dashboardID”时，他可以选择一个子页面 onClick，我希望 URL 结构将是“/dashboard/:dashboardID/:pageID”，pageID 将导航到“ PageIdComponent' 这个组件将获得一个 'match' 道具并显示 pageID

请参阅显示必要结构的附件。

最好的实现方式是什么？

【问题讨论】：

如果你使用像redux这样的状态管理，你可以使用选择的dashboardId动态更新路由。
你应该在你的Dashboard 组件中放置另一个带有路由子节点的路由器

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

【解决方案1】：

如果您的 Dashboard 组件中有子路由，那么您可以使用 match.path 值来构建子路由：

<Route path={`${props.match.path}/:dashboardId`}>} component={SubDashboard} />

为了使路径与父路径匹配，然后在其上添加一个新变量。

然后您可以使用match.url 导航到它以创建指向当前 URL 的链接并将子页面添加到其中：

<Link to={`${props.match.url}/pageFour`}>Page four</Link>

React Router 提供了通过 withRouter HOC 或各种 hooks 将相关 props 获取到您想要的任何组件的方法，而不是 prop 钻探。这些钩子是在 5.1 版中引入的

要通过钩子获得匹配，您可以使用const match = useRouteMatch()

通过 HOC 获取相关道具：

const Example = useRouteMatch(function Example({ match, location, history }) {
  return <div>{match.url}</div>;
});

对于 react 路由器 v6（即将推出）：

https://reacttraining.com/blog/react-router-v6-pre/#nested-routes-and-layouts

【讨论】：

如果子级嵌套在 Dashboard 组件内而不是直接嵌套在一个（向下两层）并且我不想一直传递“匹配”道具怎么办。有什么解决办法吗？
@Shira，我添加了一些关于withRouter HOC 的信息以及用于获取匹配信息的相关钩子。只要它们在路由器提供程序中，这些将允许您从项目中的任意位置使用它们。