React 路由器两个 URL 参数 &more

Question

我正在使用 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

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

最好的实施方式是什么？

Answer 1

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

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

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

然后您可以使用 match.url 导航到它，为当前 URL 创建一个 link 并向其添加子页面：

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

React Router 提供了通过 withRouter HOC or various hooks 将相关 props 获取到您想要的任何组件的方法，而不是 prop drilling。钩子是在版本 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

React 路由器两个 URL 参数 &more

React router two URL parameters &more

reactjs

react-router

react-router-v4

react-router-dom