如何使用上下文提供程序包装 React-router

Question

在 React js 应用程序中，我试图在 section1 页面中创建上下文数据以在所有答案页面中使用它，关键是所有答案必须是 section1 的孩子因为我可以传输数据但是有单独的页面并且有路线，那么我如何用上下文提供者包装反应路由器，或者是否有不同的方式来处理它？

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Header from './component/Header/Header';
import Intro from './pages/Intro';
import Section1 from './pages/Section1';
import Section2 from './pages/Section2';
import AllAnswer from './pages/AllAnswer';

 function App() {
    return (
<BrowserRouter>
  <Header/>
  <Routes>
    <Route path='/' element={<Intro />}/>
    <Route path='/section1' element={<Section1 />} />
    <Route path='/section2' element={<Section2/>}/>
    <Route path='/all-answer' element={<AllAnswer />}/>
  </Routes>
</BrowserRouter>
  );
 }

  export default App;

  import React , { useState, createContext} from 'react'
  import { Link } from 'react-router-dom'
   export const sectionOneContext = createContext("");

   function Section1() {

   const [value1, setValue1] = useState('both')
   const [value2, setValue2] = useState('')
   const [value3, setValue3] = useState('')
   const data = {
      answer1: value1,
      answer2: value2,
      answer3: value3
    }
   return (
     <sectionOneContext.Provider value={data}>
       <div className='container'>
        <div className='col-md-8 shadow p-3 mb-5 bg-body rounded my-5 mx-auto '>
          <h2 className='text-center'>Section 1</h2>
          <ol className="list-group list-group-numbered">
            <li className="list-group-item">
              Is your business model B2C or B2B or both?
              <ol type='A' className='my-2'>
                 <li>B2C</li>
                 <li>B2B</li>
                 <li>both</li>
              </ol>
              <input type='text' onChange={(e)=> setValue1(() =>{ 
               e.target.value.toLowerCase())}} />
           </li>
            {value1 === 'b2b' ||value1 ===  'both' ?
           <li className="list-group-item">
              Do you target all age brackets?
             <ol type='A' className='my-2'>
               <li>yes</li>
               <li>No</li>
            </ol>
           <input type='text' onChange={(e)=> setValue2(() =>{ 
             e.target.value.toLowerCase())}} value={value2}/>
           </li>
           : null
             }
           {value1 === 'b2c' ||value1 ===  'both' ?
      
           <li className="list-group-item">
              Do you target all industries?
              <ol type='A' className='my-2'>
                <li>yes</li>
                <li>No</li>
              </ol>
              <input type='text'onChange={(e)=> setValue3(() => {
                    e.target.value.toLowerCase())} value={value3}/>
            </li>
            : null }
         </ol>
         <Link to='/all-answer'>
            <button type="button" className="btn btn-dark ms-auto d-block">
             Next
               <i className="fa-solid fa-arrow-right-long ms-2"></i>  
            </button>
        </Link>
     </div>
   </div>
  </sectionOneContext.Provider>
  )
  }

  export default Section1

  import React,{useContext} from 'react'
  import {sectionOneContext} from './Section1'
   function AllAnswer() {
      const {answer1} = useContext(sectionOneContext)
      console.log(answer1)
     return (
        <div>AllAnswer</div>
      )
      }

   export default AllAnswer

Answer 1

为了在路由之间共享数据，数据必须存在于App中。 因此，您应该在应用程序中而不是在 section1 中创建上下文，并在上下文中提供 function 以像这样更改它：

....
export const sectionOneContext = useContext({});
....

function App() {
    const [data, setData] = useState({});
    return (
        <BrowserRouter>
           <sectionOneContext.Provider value={{data, setData}}>
              ....
           </sectionOneContext.Provider>
        </BrowserRouter>
  );
 }

在任何其他需要拥有或修改此数据的组件中执行以下操作：

import { useContext } from "react";
import { sectionOneContext } from "./App";

function component(){
   const {data, setData} = useContext(sectionOneContext);
   
   return (
      ....
   );
}