Typescript ReactRouter V6 中的递归好友路由

这个Reaction-RoutV5递归路由示例正好显示了我想要实现的目标:https://v5.reactrouter.com/web/example/recursive-paths

然而，我使用的是react-router-dom@6，在将我的代码转换为V6之后，输出并不是我所期望的.

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

export default function RecursiveExample() {
  return (
    <>
      <Routes>
        <Route path="/:id" element={<Person />} />
      </Routes>
    </>
  );
}

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

  return (
    <div>
      <h3>{person!.name}’s Friends</h3>

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

      {/* Outlet will render any nested routes */}
      <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:any) {
  return PEEPS.find(p => p.id === id);
}

当点击链接到下一个人id时，我收到控制台错误"No routes matched location "/0/1" "

我如何递归地呈现这些路由，同时仍然保持与V5示例中相同的URL struct ，例如"host.com/1/3/2/..."？