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

Question

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?

Drew Reese · Accepted Answer · 2022-09-26 16:13:27Z

2

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 />
  );
};

answered Sep 26, 2022 at 16:13

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ii iml0sto1 Over a year ago

Hi Drew, thanks for your response. Yes, it might actually very well just be that I'm missing the outlet. I will check tomorrow at work thanks for the HU :)

ii iml0sto1 Over a year ago

If every step needs the outlet, it looks like each page will have its parent content rendered as well? Like now its rendering both the dashboard and taskque in the same page?

Drew Reese Over a year ago

@iiiml0sto1 Affirmative. Each layout route necessarily needs to be rendered in order to also render the nested routes.

ii iml0sto1 Over a year ago

Well that is a problem in this project, however, your answer is accepted as it is the correct answer.

Drew Reese Over a year ago

@iiiml0sto1 If you want to render say a dashboard component and a taskque component separately then you can omit the element prop on the layout route (an Outlet will be rendered by default) and move the dashboard component into a nested index route.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related