Reputation: 1762
I am testing React Router v6.4 with CreateBrowserRoute
Apparently, I'm running into a problem when I nest the routes deeper than 2 levels
Router 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/>,
},
]
},
]
},
],
},
]);
Basically, the path causing troubles is this path tasks/task-que/dashboard
if I understand it all correctly it should map it like this tasks->task-que->dashboard(element)
and then render the element set as the element key-value pair.
The route is working(ish), because if I remove the path: "dashboard"
route and visit tasks/task-que/dashboard
it will fail.
It seems a bit odd as it works very well in the second-level nesting. If i change the parents element:
path: "task-que",
element: <TaskQue/>,
To
path: "task-que",
element: <TaskDashboard/>,
It will use TaskDashboard at both of these routes:
/tasks/task-que
/tasks/task-que/dashboard
Seems like I'm misunderstanding something or missing something, does anyone have any knowledge about deeper react-router
nesting who can provide constructive tips or point out where I'm failing in my test?
Upvotes: 1
Views: 1032
Reputation: 203587
Seems like the TaskQue
component is missing rendering an Outlet
component for any nested routes it is wrapping. Each level of routing depth, if wrapping routes to nest them, still needs to render its own Outlet
for the nested routes.
const TaskQue = () => {
... logic ...
return (
... Task Queue UI JSX ...
<Outlet /> // <-- "./dashboard" and <TaskDashboard />
);
};
Upvotes: 2