React Router v6组件内嵌套路由失效问题求助

你的嵌套路由失效主要有三个核心问题：

• 顶层/user路由未配置通配符，无法匹配其下的子路由路径
• User组件内的子路由使用了绝对路径，不符合嵌套路由的相对匹配逻辑
• React Router v6+ 已弃用component属性，改用element传递组件，同时需要通过Outlet组件渲染子路由内容

方案一：在User组件内维护嵌套路由 #

1. 修改顶层RouterComponent

将/user路由的路径改为/user/*，并替换component为element：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/user/*" element={<User />} />
</Routes>

2. 调整User组件的嵌套路由逻辑

使用相对路径定义子路由，替换component为element：

import { Routes, Route } from 'react-router-dom';

const User = () => {
  return (
    <>
      <SomeOtherStuff />
      <Routes>
        <Route path="" element={<SomeComp />} /> {/* 匹配 /user 路径 */}
        <Route path="edit" element={<EditForm />} /> {/* 匹配 /user/edit 路径 */}
      </Routes>
    </>
  )
}

方案二：顶层定义嵌套路由，保留User组件结构灵活性 #

这种方式既符合React Router的规范，又能让你自由修改User组件内的非路由内容：

1. 修改顶层RouterComponent

通过嵌套路由的方式定义子路由：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/user" element={<User />}>
    <Route index element={<SomeComp />} /> {/* index表示默认子路由，匹配/user */}
    <Route path="edit" element={<EditForm />} /> {/* 匹配/user/edit */}
  </Route>
</Routes>

2. 简化User组件

引入Outlet组件来渲染子路由内容：

import { Outlet } from 'react-router-dom';

const User = () => {
  return (
    <>
      <SomeOtherStuff />
      <Outlet /> {/* 子路由组件会渲染到这里 */}
    </>
  )
}

两种方案都能解决你的问题，方案二更贴合React Router v6的设计理念，同时保留你需要的组件修改灵活性。

内容的提问来源于stack exchange，提问作者nick