如何用背景關系提供者包裝React-router

在 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

uj5u.com熱心網友回復：

為了在 Routes 之間共享資料，資料必須存在于App. 所以你應該在應用程式中創建背景關系而不是在 section1 中，并在背景關系中提供一個函式來改變它：

....
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 (
      ....
   );
}

標籤：javascript 反应 反应钩子

上一篇：如何從反應中的物件陣列中回傳物件屬性

下一篇：在VSCode的condavenv中安裝pip3和flake8