代码之家 › 专栏 › 技术社区 › helion3

将根路径重定向到react路由器6中的子路径

react-router-dom react-router reactjs

helion3 · 技术社区 · 1 年前

我正试图强制重定向确切的根路径 / 到一个子路径(我们有几个模块,根目录只会将您引导到第一个模块,在实际的根目录中没有什么可显示的)。

然而,我找不到任何根路径的例子,并尝试其他方法( Navigation to 只需触发一个无限循环。

<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

2 回复 | 直到 1 年前

Jacob Smit 1 年前

您应该能够使用索引路由。

<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>

magino 1 年前

这对吗 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 />,
            },
        ],
    },
])

Drew Reese 1 年前

将重定向移动到嵌套的“全部捕获”路由中。任何路由不匹配的内容都将重定向到 "/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>

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

2 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

2 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

2 年前

Ancross · 链接未路由到组件

2 年前