[Bug]: Context prop in Outlet is not working with `index` routes.

[umarjavedse]

What version of React Router are you using?

6.1.1

Steps to Reproduce

Setup project using below nested routes.

useRoutes([
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: 'user',
                children: [
                    { index: true, element: <User /> },
                    { path: 'add', element: <AddUser /> },
                ],
            },
        ],
    },
])

and then use <Outlet context={data} /> in <Layout/>

Expected Behavior

Fetch data using useOutletContext hook.

Actual Behavior

Getting undefined with useOutletContext hook.

[liuhanqu]

When context pass to Outlet component, it only can be obtain in child route.
In the code above, the User component is the grandchild component of Layout, so it could not obtain the context prop.

[liuhanqu]

@timdorr If Outlet component don't have context prop, we can use React.useContext(RouteContext).outlet directly and not wrap with OutletContext.Provider, so the descendant components can get the context prop.
In now, only the child component can get the context prop.

[timdorr]

You should be using the new useOutletContext(), not trying to access the route context directly.

[umarjavedse]

@liuhanqu thanks for response, if all nested child can access context then this feature make more sense.

Yes @timdorr I'm using useOutletContext() to access context.

[TranLong183]

I use react-router-dom v6.0.2 does it support useOutletContext()

[timdorr]

No, that is new as of 6.1.0. Please upgrade to a newer version, as you'll also get some bug fixes included.

[tmokmss]

Hi just to confirm, is it currently possible to access a parent's context from a grandchild route?

I mean this kind of situation:

<Routes>
  <Route path="/" element={<Outlet context={{ someKey: 1 }} />}>
    <Route path="child" element={<Outlet context={{ otherKey: 1 }} />}>
      <Route index element={<GrandChildPage />} />
    </Route>
  </Route>
</Routes>

then can we access the context containing someKey from GrandChildPage?

[umarjavedse]

@tmokmss I believe accessing the context from GrandChildPage is not working with Outlet in this package for now might be doable in future.
To perform that you need to create custom Outlet using useOutlet hook with Context Provider.

[tmokmss]

Hi @umarjavedse thanks. Yeah I actually tried similar code as above but it did not work.
As a workaround I found a way like this (manually inheriting a parent's context in a child context):

<Routes>
  <Route path="/" element={<Outlet context={{ someKey: 1 }} />}>
    <Route path="child" element={<Outlet context={{ ...useOutletContext(), otherKey: 1 }} />}>
      <Route index element={<GrandChildPage />} />
    </Route>
  </Route>
</Routes>

[github-actions]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.