如何将出口上下文传递到反应路由器v6中的嵌套路由

Question

我正在使用react router dom v6如何访问第二个子中嵌套路由中的上下文

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

我在Parent组件中向Outlet传递了一个上下文，我想在ChildSecond中访问它，在Child组件Outlet 中再次传出它

预期代码

父组件：

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

子组件：

const Child = ()=><Outlet/>

ChildSecond组件

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

Answer 1

自v6.3.0起。react路由器的useOutletContext()只在直接子组件中工作。如果你真的不想创建自己的上下文，你可以很容易地转发出口上下文，如下所示：

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

Answer 2

您可以在主组件中定义上下文并将其提供给整个应用程序：

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>

然后使用在应用程序中的任何位置检索数据

import { useContext } from 'react'
import { GlobalContext } from '/path/to/main/file';
...
const { someData } = useContext(GlobalContext);