React Router v6嵌套路由部分路径404问题求助

你的嵌套路由失效、访问/categories/:name或/profile/edit出现404的核心原因是路由结构错误，子路由没有正确嵌套在父路由内部，同时存在无效的空路由标签干扰解析。

问题分析 #

在React Router v6中，嵌套路由必须作为父路由的子元素存在，才能继承父路由的路径前缀。你当前的代码里，categories和profile的子路由（/:name、edit）和父路由是同级关系，而且还添加了空的<Route/>标签，这会导致React Router将这些子路由解析为根路径（/）下的路由，自然匹配不到/categories/:name这类路径。

另外，父路由对应的组件（比如<Categories/>、<Profile/>）内部必须包含<Outlet/>组件，否则子路由的内容无法渲染出来。

修正后的路由代码 #

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

// 确保父组件包含Outlet，比如Categories组件：
function Categories() {
  return (
    <div>
      <h1>Categories</h1>
      {/* 子路由内容会渲染在这里 */}
      <Outlet />
    </div>
  );
}

// Profile组件同理：
function Profile() {
  return (
    <div>
      <h1>Profile</h1>
      <Outlet />
    </div>
  );
}

// 修正路由结构
const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={<Root />}>
    <Route path="about" element={<About />} />
    <Route path="sign-up" element={<SignUp />} />
    <Route path="articles" element={<Articles />} />
    <Route path="articles/:title" element={<Article/>} />
    {/* 正确嵌套categories的子路由 */}
    <Route path="categories" element={<Categories />}>
      <Route path=":name" element={<Category/>} />
    </Route>
    {/* 正确嵌套profile的子路由 */}
    <Route path="profile" element={<Profile />}>
      <Route path="edit" element={<EditProfileForm />} />
    </Route>
    <Route path="authors/:name" element={<Author />}/>
  </Route>
))

function App() {
  return (
    <RouterProvider router={router} />
  );
}

关键修改点 #

• 将/:name嵌套在categories路由内部，edit嵌套在profile路由内部，确保相对路径继承父路由的前缀
• 移除了多余的空<Route/>标签，避免无效路由干扰解析
• 在Categories和Profile组件中添加<Outlet/>，作为子路由内容的渲染出口

这样修改后，访问/categories/javascript或/profile/edit就能正确匹配到对应的路由组件了。

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