我正在尝试创建一些嵌套在我的主要路由中的路由。我的理由是我创建了一个侧边栏,它会在某些路由上弹出,然后可用于链接嵌套路由以在页面上显示不同的内容。不幸的是,当我的嵌套路由没有将工作表 ID 设置为路径的第二部分时,我设置顶级路由的方式 /Renewals/:worksheetID
会导致一些麻烦。例如,如果我的嵌套路由是 /Renewals/unallocatedLicenses/:worksheetID
,当我控制台输出 params 工作表 ID 变为“unallocatedLicenses”,并将我带到一个我不想去的页面。除了移动路由命名方案之外,有没有办法访问在嵌套路由而不是顶级路由上指定的工作表 ID?
如果我的 URL 是 /Renewals/unallocatedLicenses/1
,我如何将 1 作为我需要的参数而不是“unallocatedLicenses”部分?
这是我的代码:
<Route
path="/Renewals/:worksheetID"
render={({ match: { params, url, path } }) => {
console.log({ path, params, url });
return (
<>
<RenewalSidebar worksheetID={params.worksheetID} />
<Switch>
<Route exact path={`/Renewals/:worksheetID([0-9]+)`} component={RenewalOverview} />
<Route
exact
path={`/Renewals/:worksheetID/AMDashboard/:publisherName+`}
render={(props) => <RenewalsAMDashboard {...props} userRoles={user.roles} />}
/>
<Route
exact
path={`/Renewals/unallocatedLicenses/:worksheetID`}
render={(props) => {
console.log('Hey We are currently in the unallocated license route');
return <RenewalUnallocatedLicenses {...props} userRoles={user.roles} />;
}}
/>
</Switch>
</>
);
}}
/>;