如何在React项目顶层通过react-dom render传递props共享全局语言状态

方案1：封装根布局组件（轻量场景最优，适合小型练习项目） #

你只需要把路由和语言状态都封装到一个顶层的函数组件里，就可以合法使用useState，修改后的index.js代码如下：

import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
import { useState } from "react";

// 新增顶层根组件，符合Hook调用规则
function Root() {
  const [language, setLanguage] = useState("GB");
  const changeLanguage = (lang) => setLanguage(lang);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App language={language} setLang={changeLanguage} />} />
        <Route path='tuktuktours' element={<TukTukTours language={language}/>}/>
        <Route path='bycicletours' element={<BycicleTours language={language}/>}/>
        <Route path='walkingtours' element={<WalkingTours language={language}/>}/>
      </Routes>
    </BrowserRouter>
  )
}

const rootElement = document.getElementById("root");
render(<Root />, rootElement);

该方案完全适配你现有的代码结构，改造成本极低，不需要引入额外概念。

方案2：使用React Context（中大型项目最优，适合后续功能扩展） #

如果后续还要新增更多全局共享状态（比如主题、用户登录状态），可以用Context做全局状态分发，避免层层手动传参：

1. 首先新建LanguageContext.js文件：

import { createContext, useContext, useState } from 'react';

const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const [language, setLanguage] = useState('GB');
  const changeLanguage = (lang) => setLanguage(lang);

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
  )
}

// 自定义Hook简化调用逻辑
export function useLanguage() {
  return useContext(LanguageContext);
}

2. 修改index.js，用Provider包裹全局路由：

import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
import { LanguageProvider } from './LanguageContext';

const rootElement = document.getElementById("root");
render(
  <LanguageProvider>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path='tuktuktours' element={<TukTukTours />}/>
        <Route path='bycicletours' element={<BycicleTours />}/>
        <Route path='walkingtours' element={<WalkingTours />}/>
      </Routes>
    </BrowserRouter>
  </LanguageProvider>,
  rootElement
);

3. 任意组件里直接调用useLanguage即可获取状态和修改方法，比如App组件里的切换逻辑：

import { useLanguage } from '../LanguageContext';

function App() {
  const { language, changeLanguage } = useLanguage();
  // 直接用language变量渲染文本，调用changeLanguage即可切换全局语言
}

该方案无需给每个路由组件手动传参，后续新增路由页面也自动具备语言访问能力，长期维护成本更低。

内容的提问来源于stack exchange，提问作者Jorge Guerreiro