如何在 react-router v6 中的树结构中创建深层路径

当路由是索引路由时，它不应该也使用path道具，因为它理解路径是包装父布局路由的路径。

TaskPage组件应该是动态的，而不是路由配置。路由配置应该是渲染“根”TaskPage组件的“根”路由的入口点"/tasks/:id/*"。该TaskPage组件现在有效地递归地在<Route path="children/:id/*" element={<TaskPage />} />它呈现的新嵌套相对路径中呈现其自身的另一个实例。

代码示例：

应用程序

const routes: RouteObject[] = [
  {
    path: "/tasks",
    element: <Layout />,
    children: [
      {
        path: ":id/*",
        element: <TaskPage />
      },
      {
        index: true,
        element: <TaskTreePage />
      }
    ]
  },
  {
    index: true,
    element: <Navigate to="/tasks" />
  }
];

export default function App() {
  const element = useRoutes(routes);
  return element;
}

任务页

这就是“魔术”发生的地方。它渲染一个Routes具有两条路由的新组件，一个用于渲染当前深度的链接的索引路由和一个用于渲染嵌套子级的路由。

function TaskPage() {
  const { id } = useParams();
  const task = findTask(id as string, tasks);

  if (!task) {
    return <h2>Not Found!</h2>;
  }

  return (
    <Routes>
      <Route
        index
        element={
          <div>
            <h2>task of {task.name}</h2>
            <div>
              <Link to="../..">Back</Link>
              <div>
                <h2>Children</h2>
                {task.children.map((child: Task) => (
                  <Link key={child.id} to={`children/${child.id}`}>
                    {child.name}
                  </Link>
                ))}
              </div>
            </div>
          </div>
        }
      />
      <Route path="children/:id/*" element={<TaskPage />} />
    </Routes>
  );
}

请注意尾随通配符"*"匹配器以允许匹配嵌套路由。还要注意后退链接现在是"../.."因为每一级嵌套都会推送两个路径段，所以要“返回”两个路径段需要删除。

const tasks: Task[] = [
  {
    id: 1,
    name: "one",
    children: [
      {
        id: 3,
        name: "three",
        children: [
          {
            id: 5,
            name: "five",
            children: [{ id: 7, name: "seven", children: [] }]
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: "two",
    children: [
      { id: 4, name: "four", children: [{ id: 6, name: "six", children: [] }] }
    ]
  }
];