Estoy probando React Router v6.4 con CreateBrowserRoute
Aparentemente, tengo un problema cuando anido las rutas a más de 2 niveles
Objeto de enrutador
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/>,
},
]
},
]
},
],
},
]);
Básicamente, la ruta que causa problemas es esta ruta tasks/task-que/dashboard si entiendo todo correctamente, debería mapearlo así tasks->task-que->dashboard(element) y luego representar el conjunto de elementos como la clave del elemento -par de valores.
La ruta funciona (más o menos), porque si elimino la path: "dashboard" y visito tasks/task-que/dashboard fallará.
Parece un poco extraño ya que funciona muy bien en el anidamiento de segundo nivel. Si cambio el elemento principal:
path: "task-que",
element: <TaskQue/>,
A
path: "task-que",
element: <TaskDashboard/>,
Utilizará TaskDashboard en ambas rutas:
/tasks/task-que/tasks/task-que/dashboard Parece que estoy malinterpretando algo o me estoy perdiendo algo, ¿alguien tiene algún conocimiento sobre el anidamiento más profundo react-router que pueda proporcionar consejos constructivos o señalar dónde estoy fallando en mi prueba?
Parece que al componente TaskQue le falta renderizar un componente Outlet para cualquier ruta anidada que esté envolviendo. Cada nivel de profundidad de enrutamiento, si envuelve rutas para anidarlas, todavía necesita generar su propio Outlet para las rutas anidadas.
const TaskQue = () => {
... logic ...
return (
... Task Queue UI JSX ...
<Outlet /> // <-- "./dashboard" and <TaskDashboard />
);
};