我已设置路由器。它们都包含在一个父根中，该父根的组件包含Outlet组件（<ComponentWithOutlet />）。在子路由中，还有一个子路由具有自己的子路由（<Route path="foo" />）。所有路由器都工作正常。

const RootRouter: FC = () => {
  return (
    <BrowserRouter basename="/">
      <Routes>
        <Route path="/" element={<ComponentWithOutlet />}>
          <Route path="/" element={<SomeComponent />} />
          <Route path="foo">
            <Route path="bar" element={<BarComponent />} />
            <Route path="test" element={<TestComponent />} />
          </Route>
        </Route>
        <Route
          path="*"
          element={<Navigate to="/" />}
        />
      </Routes>
    </BrowserRouter>
  );
};

export default RootRouter;

我想在错误的url上设置正确的重定向。现在，当我导航到丢失的url（例如，/sdfsdf或/foo/asdfsadf）时，应用程序会正确地重定向到主页。但当我转到/foo url时，呈现的是<ComponentWithOutlet />，这是错误的。我需要设置重定向到/foo/bar或应用程序根目录。
我尝试将此路由添加到<Route path="foo" />，但不起作用：

<Route path="*" element={<Navigate to="/" />} />

我尝试更改<Route path="foo" />，但也不起作用：

<Route path="foo" element={<Navigate to="/" />}>

我该怎么做呢？