我已经设置好路由了.它们都被包裹在具有包含出口组件(<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="/" />}>
我该怎么做呢?