如何正确编写React路由？嵌套子路由报错求助

错误原因 #

你遇到的Error: Absolute route path "/user/all" nested under path "/user/profile/:userId" is not valid，是因为React Router不允许在嵌套路由的children数组中使用绝对路径（以/开头的路径）。子路由的路径默认是相对于父路由的路径，若使用绝对路径，该路由应与父路由同级，而非作为子路由嵌套。

正确路由架构（分两种场景） #

场景1：子路由是父路由的嵌套路径（如/user/profile/:userId/all）

如果你的需求是在UserProfile组件内渲染用户的全部帖子（路径为/user/profile/:userId/all），需将子路由改为相对路径，并确保父组件包含<Outlet />：

路由配置：

{
    path: "/user/profile/:userId",
    element: <UserProfile />,
    children: [
       {
          path: "all", // 相对路径，最终拼接为 /user/profile/:userId/all
          element: <div>User all posts</div>,
       },
    ],
}

UserProfile组件必须引入并渲染<Outlet />，用于显示子路由内容：

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

function UserProfile() {
  return (
    <div>
      <h2>用户个人主页</h2>
      {/* 子路由内容会渲染在这个Outlet位置 */}
      <Outlet />
    </div>
  );
}

场景2：/user/all与/user/profile/:userId为同级路由

如果/user/all是独立于用户详情页的路由（而非嵌套在详情页内），需调整路由结构，将两个路由放在同一个父路由下：

路由配置：

{
    path: "/user",
    element: <UserLayout />, // 可选的父布局组件，需包含Outlet
    children: [
       {
          path: "profile/:userId",
          element: <UserProfile />,
       },
       {
          path: "all",
          element: <div>User all posts</div>,
       },
    ],
}

UserLayout组件示例：

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

function UserLayout() {
  return (
    <div className="user-layout">
      <nav>
        {/* 可添加导航链接，比如跳转到/user/all或/user/profile/123 */}
      </nav>
      <Outlet />
    </div>
  );
}

核心规则总结 #

• 嵌套路由的子路由使用相对路径（不带/开头），会自动与父路由路径拼接
• 绝对路径路由需与父路由同级，不能放在children数组中
• 父路由的组件必须包含<Outlet />，才能渲染其子路由的内容

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