CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
ii iml0sto1
ii iml0sto1

Reputation: 1762

React Router V6.4 - Not rendering nested route element - instead render parents

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:

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

Answers (1)

Drew Reese
Drew Reese

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

Related Questions