英文:
Redirect root path to child in react-router 6
问题
我试图强制将根路径/重定向到子路径（我们有多个模块，根路径只会将您重定向到第一个模块，实际根路径上没有内容可显示）。
但是，我找不到任何关于根路径的示例，并尝试其他方法（使用导航到会触发无限循环）。
<Route element={<Navigate replace to='/module/submodule' />} path='/' />
<Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
<Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
</Route>
</Route>
我需要将/重定向到/module/submodule。
英文:
I'm trying to force redirect the exact root path / to a child path (we have several modules and the root will just direct you to the first one, there's nothing to show at the actual root).
However I can't find any examples for the root path, and trying other approaches (with Navigation to just trigger an infinite loop.
<Route element={<Navigate replace to='/module/submodule' />} path='/'>
<Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
<Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
</Route>
</Route>
I need to redirect / to /module/submodule
答案1
得分: 3
你应该能够使用索引路由。
<Route path='/'>
<Route element={<Navigate replace to='/module/submodule' />} index />
<Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
<Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
</Route>
</Route>
英文:
You should be able to use an index route.
<Route path='/'>
<Route element={<Navigate replace to='/module/submodule' />} index />
<Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
<Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
</Route>
</Route>
答案2
得分: 1
将重定向移到嵌套的“catch-all”路由中。任何未匹配任何路由的内容都将重定向到 "/module/submodule"。
<Route path="/">
<Route
path="module"
element={<Module />}
handle={{ crumb: (): string => 'Module' }}
>
<Route
path="submodule"
element={<Submodule />}
handle={{ crumb: (): string => 'Submodule' }}
/>
</Route>
<Route path="*" element={<Navigate replace to="/module/submodule" />} />
</Route>
英文:
Move the redirect into a nested "catch-all" route. Anything not matched by any route will be redirected to "/module/submodule".
<Route path="/">
<Route
path="module"
element={<Module />}
handle={{ crumb: (): string => 'Module' }}
>
<Route
path="submodule"
element={<Submodule />}
handle={{ crumb: (): string => 'Submodule' }}
/>
</Route>
<Route path="*" element={<Navigate replace to="/module/submodule" />} />
</Route>
答案3
得分: 1
这是正确的 react-router-dom:6.15.0 用法吗？
英文:
Is this correct for react-router-dom:6.15.0?
const router = createBrowserRouter([
{
path: '/',
element: <App />,
errorElement: <ErrorPage />,
children: [
{
index: true,
element: <Navigate replace to='/projects' />,
},
{
path: '/projects',
element: <ProjectsPage />,
},
],
},
])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论