Unable to display outlet context data in child component

[dMaisnam]

I am trying to display the data from my outlet context defined in RootLayout to its child routes. The context looks somewhat like this

const RootLayout: FC = () => {
    const rootOutletContext = {
        userEmail: '[email protected]',
        username: 'Admin',
    };

    return <Outlet context={rootOutletContext satisfies IRootOutletContext} />
};

Here is what my route looks like

export const router = createBrowserRouter(
    createRoutesFromElements(
        <Route element={<RootLayout />}>
            <Route path="/" element={<DashboardLayout />}>
                <Route index element={<IndexPage />} />
            </Route>
            <Route path="*" element={<>404 | Page not found</>} />
        </Route>
    )
);

Here is a minimal example I wrote https://stackblitz.com/edit/vitejs-vite-76aysz

The context data is displayed fine in the child component AppHeader defined inside the DashboardLayout component. But the context data is undefined in the IndexPage component. Both of them are child components of the RootLayout.

What am I doing wrong here? Any help is greatly appreciated. Thanks for reading.

[sergiodxa]

Each Outlet renders sets the context again, so DashboardLayout can access the RootLayout context value, but IndexPage will get the context value from DashboardLayout and not RootLayout.

You need to read and set it again in DashboardLayout, or use a custom context that you set render the provider in RootLayout and then can read it in IndexPage.

Also, if you're using Outlet context to read the RootLayout data, and that data comes from the loader, you can use useRouteLoaderData instead of Outlet.

[dMaisnam]

Ok. Thank you for the clarification. I will look into it further.