如何在反應路由器 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/>

Child第二個組件

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

Answer 1

從 v6.3.0 開始。 react-router 的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();

...

<GlobalContext.Provider
    value={{someData: 'hello world'}}>
    <Routs>
    <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);