时间戳

首页 > 解决方案 > 反应路由器两个 URL 参数及更多

reactjs - 反应路由器两个 URL 参数及更多

问题描述

我正在使用 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”组件将获得“匹配”道具并显示 pageID

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

实施它的最佳方法是什么？在此处输入图像描述

标签： reactjsreact-routerreact-router-domreact-router-v4

解决方案

如果 Dashboard 组件中有子路由，则可以使用该match.path值来构建子路由：

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

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

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

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

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

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

通过 HOC 获取相关的 props：

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

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

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

推荐阅读