Typescript 如何在Reaction 18、ReactionRout6中的导航栏中获取路由参数

我有一个react 前台.代码如下所示.我的问题是，我需要在导航菜单中获取<Routes>以外的路由信息，而我不能使用useParams().另一方面，我试图将<Routes>移到<NavMenu>之外，但得到一个错误:

Error: [default] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

在Reaction 18之前，我可以使用this.props.location.pathname.split...，但这也是一种变通方法.此外，withRouter在react-router-dom@6中也不再可用.

代码，非常简单:

Index.tsx

ReactDOM.createRoot(document.getElementById('react-hook'))
    .render(
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    );

App.tsx

export default () => (
    <Layout>
        <Routes>
            <Route path='/:auxParam/site/foo/:startIndex?' Component={Extra} />
        </Routes>
    </Layout>
);

Layout.tsx

export default (props: { children?: React.ReactNode }) => (
    <React.Fragment>
        <NavMenu />
        <Container tag="main">
            {props.children}
        </Container>
    </React.Fragment>
);

导航菜单.tsx导航菜单.tsx

class NavMenu extends React.PureComponent<NavMenuProps, { isOpen: boolean }> {
  public render() {
    const auxParam: string = ...?...; // how to get it?
    return (
      <header>
        <Navbar>
          <Container>
            <NavbarBrand tag={Link} to="/">My site (React)</NavbarBrand>
            <ul>
              <NavItem>
                <NavLink tag={Link} to={`/${aux}/site/foo`}>Extra</NavLink>
              </NavItem>
            </ul>
          </Container>
        </Navbar>
      </header>
    );
  }
}
export default NavMenu;