React Router V6.4 - 不渲染嵌套路由元素 - 而是渲染父母

Question

我正在使用 CreateBrowserRoute 测试 React Router v6.4

显然，当我将路线嵌套到 2 层以上时，我遇到了问题

路由器 Object

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root/>,
        children: [
            {
                index: true,
                element: <Index/>
            },
            {
                path: "tasks",
                element: <TaskIndex/>,
                children: [
                    {
                        index: true,
                        element: <TaskQue/>
                    },
                    {
                        path: "task-que",
                        element: <TaskQue/>,
                        children: [
                            {
                                path: "dashboard",
                                element: <TaskDashboard/>,
                            },
                        ]
                    },
                ]
            },
        ],
    },
]);

基本上，引起麻烦的路径是这个路径tasks/task-que/dashboard如果我理解正确的话它应该 map 它像这样 tasks- tasks->task-que->dashboard(element)然后将元素集渲染为元素键-值对。

该路线正在运行（ish），因为如果我删除path: "dashboard"路线并访问tasks/task-que/dashboard它将失败。

这似乎有点奇怪，因为它在二级嵌套中效果很好。 如果我更改父母元素：

            path: "task-que",
            element: <TaskQue/>,

至

            path: "task-que",
            element: <TaskDashboard/>,

它将在这两条路线上使用 TaskDashboard：

• /tasks/task-que
• /tasks/task-que/dashboard

似乎我误解了某些东西或遗漏了某些东西，是否有人对更深react-router嵌套有任何了解，谁能提供建设性的提示或指出我在测试中失败的地方？

Answer 1

似乎TaskQue组件缺少为其包装的任何嵌套路由呈现Outlet组件。 每一层路由深度，如果包裹路由嵌套，仍然需要为嵌套路由渲染自己的Outlet 。

const TaskQue = () => {
  ... logic ...

  return (
    ... Task Queue UI JSX ...
    <Outlet /> // <-- "./dashboard" and <TaskDashboard />
  );
};