I am using react router dom v6 how can I access the context in a nested route in the second child

  <Routes>
    <Route element={<Parent/>}>
      <Route element={<Child/>}>
        <Route element={<ChildSecond/>}/>
      </Route>
    <Route> 
  </Routes>

I passed a context to Outlet in Parent Component I wanna access it in ChildSecond with out passing it again in Child component Outlet

expected code

Parent Component:

  const Parent = ()=>{
    const myContext = {someData:'hello world'}
    return <Outlet context={myContext}/>
  }

Child Component:

  const Child = ()=><Outlet/>

ChildSecond component

  import {useOutletContext} from 'react-router-dom'
  const ChildSecond = ()=>{
      const {someData} = useOutletContext()
      return <div>someData</div>
  }

I am using react router dom v6 how can I access the context in a nested route in the second child

  <Routes>
    <Route element={<Parent/>}>
      <Route element={<Child/>}>
        <Route element={<ChildSecond/>}/>
      </Route>
    <Route> 
  </Routes>

I passed a context to Outlet in Parent Component I wanna access it in ChildSecond with out passing it again in Child component Outlet

expected code

Parent Component:

  const Parent = ()=>{
    const myContext = {someData:'hello world'}
    return <Outlet context={myContext}/>
  }

Child Component:

  const Child = ()=><Outlet/>

ChildSecond component

  import {useOutletContext} from 'react-router-dom'
  const ChildSecond = ()=>{
      const {someData} = useOutletContext()
      return <div>someData</div>
  }

• javascript
• reactjs
• react-router-dom

• 1 Your first <Routes>, you called <Routs>, there's no path anywhere either. – Nicolai Christensen Commented Mar 24, 2022 at 8:24
• the code is just an example of what I want it's not real code – Revan99 Commented Mar 28, 2022 at 6:37
• I found this useful: reactrouter.com/en/6.4.4/hooks/use-outlet-context – flaudre Commented Mar 4, 2023 at 4:06

2 Answers 2

As of v6.3.0. react-router's useOutletContext() only works in the immediate child component. If you really don't want to create your own context, you can easily forward the outlet context on like so:

import React from 'react';
import { Routes, Route, Outlet, useOutletContext } from 'react-router-dom';

export default function App() {
  return (
    <Routes>
      <Route element={<Grandparent />}>
        <Route element={<Parent />}>
          <Route index element={<Child />} />
        </Route>
      </Route>
    </Routes>
  );
}

function Grandparent() {
  return (
    <main>
      <Outlet context={{ someData: 'hello world' }} />
    </main>
  );
}

function Parent() {
  return <Outlet context={useOutletContext()} />;
}

function Child() {
  const { someData } = useOutletContext<{ someData: string }>();
  return <p>{someData}</p>;
}

You could define a context in the main component and provide it to the whole application:

export const GlobalContext = React.createContext();

...
// this works outside of RouteProvider at least
<GlobalContext.Provider
    value={{someData: 'hello world'}}>
    <Routes>
    <Route element={<Parent/>}>
      <Route element={<Child/>}>
        <Route element={<ChildSecond/>}/>
      </Route>
    <Route> 
  </Routes>
</GlobalContext.Provider>

Then retrieve the data anywhere in your application with:

import { useContext } from 'react'
import { GlobalContext } from '/path/to/main/file';

...

const { someData } = useContext(GlobalContext);