React-Router V6递归路由问题：匹配V5层级URL结构

你的问题出在未配置递归嵌套的路由规则，当前仅定义了单层/:id路由，无法匹配/0/1这类多层嵌套路径。要实现递归路由并保留host.com/1/3/2/...的URL结构，按以下方式修改即可：

核心修改点 #

• 在父路由/:id内部嵌套指向自身的子路由，形成递归匹配规则
• 你的Link相对路径跳转逻辑无需修改，本身符合需求

修改后的完整代码 #

import {
  Routes,
  Route,
  Link,
  useParams,
  Outlet,
} from "react-router-dom";

export default function RecursiveExample() {
  return (
    <>
      <Routes>
        {/* 匹配第一层用户ID */}
        <Route path="/:id" element={<Person />}>
          {/* 递归匹配后续层级的ID，路径为相对路径的:id */}
          <Route path=":id" element={<Person />} />
        </Route>
      </Routes>
    </>
  );
}

function Person() {
  let { id } = useParams();
  let person = find(parseInt(id as string, 10));

  if (!person) {
    return <div>找不到该用户</div>;
  }

  return (
    <div>
      <h3>{person.name}的好友</h3>

      <ul>
        {person.friends.map(friendId => (
          <li key={friendId}>
            <Link to={`${friendId}`}>{find(friendId)?.name}</Link>
          </li>
        ))}
      </ul>

      {/* 渲染子路由对应的Person组件，实现层级嵌套展示 */}
      <Outlet />
    </div>
  );
}

const PEEPS = [
  { id: 0, name: "Michelle", friends: [1, 2, 3] },
  { id: 1, name: "Sean", friends: [0, 3] },
  { id: 2, name: "Kim", friends: [0, 1, 3] },
  { id: 3, name: "David", friends: [1, 2] }
];

function find(id: number) {
  return PEEPS.find(p => p.id === id);
}

原理说明 #

• 根路由/:id匹配第一层用户ID，内部嵌套的Route path=":id"会匹配后续每一层ID（比如/0/1中的1、/0/1/2中的2），实现无限层级的递归路由
• Outlet作为嵌套路由的占位符，会将下一层的Person组件渲染在当前组件内部，保持层级展示结构
• Link的to={${friendId}}是相对当前路径的跳转，会自动拼接成/当前ID/好友ID，符合需求的URL结构

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