嵌套路由中的反应路由器动态 URL 参数错误

Question

我正在尝试创建一些嵌套在我的主要路由中的路由。我的理由是我创建了一个侧边栏，它会在某些路由上弹出，然后可用于链接嵌套路由以在页面上显示不同的内容。不幸的是，当我的嵌套路由没有将工作表 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>
            </>
        );
    }}
/>;