如何解决反应路由器两个URL参数&more
我正在使用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
请参阅显示必要结构的附件。
实现它的最佳方法是什么?
解决方法
如果您的子路由位于仪表板组件中,则可以使用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来为您所需的任何组件提供相关道具,而不是道具钻探。挂钩是在5.1版中引入的
要通过挂钩获得比赛,您可以使用const match = useRouteMatch()
要通过HOC获得相关道具:
const Example = useRouteMatch(function Example({ match,location,history }) {
return <div>{match.url}</div>;
});
对于React Router v6(即将推出):
https://reacttraining.com/blog/react-router-v6-pre/#nested-routes-and-layouts
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。