如何将出口上下文传递给React Router v6中的嵌套路由

Question

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

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

我将上下文传递给Parent组件中的 Outlet 我想访问它，而无需在组件 OutletChildSecond中再次传递它Child

预期代码

父组件：

  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-routeruseOutletContext() 仅适用于直接子组件。如果您确实不想创建自己的上下文，您可以轻松转发出口上下文，如下所示：

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