在react中将变量传递给其他页面

Question

我必须为 ReactJs 应用程序中的所有页面创建全局变量。它被命名为“city”，每次我使用reactJs的useState时它都会改变。仅在反应站点的主页中更改了城市。 当我更改主页中的城市并将其定向到其他页面时，不会采用更改后的城市值。它仍然是我在 app.js 中声明的默认值。我通过在 app.js 的控制台中打印城市来检查它，每次当我在 MainPage 中更改它时，它都会更改，这是正确的，但是当我将其定向到其他页面时，城市的默认值（即“选择城市”）是采取。 我使用功能组件。图像中给出了变量声明和路由的图像。 Mainpage 正在更改 app.js 中的城市，但不会转发到其他页面。其采用默认值。 我希望每当 MainPage 中的城市值发生更改时，效果都会显示在正在运行的 app.js 中，并且当我访问其他页面时也会显示效果，就像“https://www.nobroker”一样.in/home-services'，他们。但这些更改不会反映到其他页面。 我正在使用标签将窗口重定向到其他页面。

app.js 的代码为：

function App() {

const [city, setCity] =useState("选择城市")

const handleData = (data) =>; { 设置城市（数据） } 控制台.log(城市);

返回 （

  {/* home page  */}
  <Route exact path='/home-services' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />

  {/* footer pages  */}
  <Route exact path='/home-services/terms-and-conditions' element={<HouseDeckHomeServicesTC/>} />
  <Route exact path='/home-services/privacy-policy' element={<HouseDeckHomeServicesPrivacy/>} />
  <Route exact path='/home-services/return-exchange-and-refund' element={<HouseDeckHomeServicesPrivacy/>} />
  <Route exact path='/home-services/faqs' element={<HouseDeckHomeServicesFAQpage />} />

  {/* services pages  */}
  <Route exact path='/home-services/painting' element={<HouseDeckHomeServicesPainting city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/cleaning' element={<HouseDeckHomeServicesCleaning city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/home-sanitization' element={<HouseDeckHomeServicesSanitization city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/ac-repair' element={<HouseDeckHomeServicesACRepair city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/electrician' element={<HouseDeckHomeServicesElectrician city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/carpentary' element={<HouseDeckHomeServicesCarpentary city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/plumbing' element={<HouseDeckHomeServicesPlumbing city={city} setCity={setCity} handleData={handleData} />} />

  {/* 404 page  */}
  <Route exact path='*' element={<HouseDeckHomeServicesNotFound city={city} />} />
</Routes>
</BrowserRouter>

）； 请

enter code here

帮忙。

Answer 1

您可以使用 useContext 将 props 从父级传递给子级

CityContext.js

import React from 'react';

const CityContext = React.createContext({
  city: '',
  handleChangeCity: (value) => {}
  handleData: (value) => {}
})

export const CityProvider = CityContext.Provider;
export const CityConsumer = CityContext.Consumer;
export default CityContext ;

app.js

import { CityProvider } from './CityContext';

function App() {

  const [city, setCity] =useState("Select City")
  const handleData = (data) => { setCity(data) } console.log(city);

  return (
    <CityProvider
      value={
        city={city}
        handleChangeCity={setCity}
        handleData={handleData}
      }
    >
      <BrowserRouter>
        <Routes>
          // here you do not need add props to the routes
          <Route exact path='/home-services' element={<HouseDeckHomeServicesMainPage />} />
          <Route exact path='/' element={<HouseDeckHomeServicesMainPage />} />
          ...
        </Routes>
      </BrowserRouter>
    </CityProvider>
  )

HouseDeckHomeServicesMainPage.js

import React, { useContext } from 'react';
import CityContext from './CityContext';

function HouseDeckHomeServicesMainPage() {
  // This is states in app.js (city, setCity, handleData)
  const { city, handleChangeCity, handleData } = useContext(CityContext);
  const handleChangeName= (value) => {
    handleChangeCity(value)
  }

  return (
    <>
      <p>{city}</p>
      <select value={city} onChange={(e) => handleChangeName(e.target.value)}>
        <option />
        <option />
      </select>
    <>
  )
}