how to wrap React-router with context provider-CodePudding

In react js app, i am trying to create context data in section1 page to use it in all-answer page, the point is the all-answer must be a child to section1 for i can transfer the data but there are separate pages and have routes, so how can i wrap the react router with context provider or if there is a different way to handle it?

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

CodePudding user response：

In order to share data between Routes ,the data must live in the App. So you should create the context in the app not in section1 and provide a function in the context to change it like that:

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

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

and in any other component that needs to have or modify this data do the following:

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

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