Estoy usando el enrutador de reacción dom v6, ¿cómo puedo acceder al contexto en una ruta anidada en el segundo hijo?
<Routes> <Route element={<Parent/>}> <Route element={<Child/>}> <Route element={<ChildSecond/>}/> </Route> <Route> </Routes> Pasé un contexto a Outlet en el componente principal. Quiero acceder a él en Parent sin pasarlo nuevamente en Child componente ChildSecond .
código esperado
Componente principal:
const Parent = ()=>{ const myContext = {someData:'hello world'} return <Outlet context={myContext}/> }Componente hijo:
const Child = ()=><Outlet/>NiñoSegundo componente
import {useOutletContext} from 'react-router-dom' const ChildSecond = ()=>{ const {someData} = useOutletContext() return <div>someData</div> }Puede definir un contexto en el componente principal y proporcionarlo a toda la aplicación:
export const GlobalContext = React.createContext(); ... <GlobalContext.Provider value={{someData: 'hello world'}}> <Routs> <Route element={<Parent/>}> <Route element={<Child/>}> <Route element={<ChildSecond/>}/> </Route> <Route> </Routes> </GlobalContext.Provider>Luego recupere los datos en cualquier lugar de su aplicación con:
import { useContext } from 'react' import { GlobalContext } from '/path/to/main/file'; ... const { someData } = useContext(GlobalContext);A partir de v6.3.0. useOutletContext() de react-router solo funciona en el componente secundario inmediato . Si realmente no desea crear su propio contexto, puede reenviar fácilmente el contexto de salida de la siguiente manera:
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>; }