React项目初始化全局状态，实现路由组件间数据共享

你要的这种全局状态共享需求，用 React Context 就能实现，而且完全支持读写操作——之前你对 Context 的理解有偏差，它不仅是用来包裹组件的容器，更是 React 官方推荐的轻量全局状态传递方案。下面是适配你需求的完整实现：

1. 创建全局状态 Context #

新建 GlobalStateContext.tsx 文件，封装全局状态的创建、Provider 和便捷获取 Hook：

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

// 定义全局状态的类型（TypeScript 语法，JS 项目可省略）
type GlobalStateType = {
  globalNumber: number;
  setGlobalNumber: (value: number) => void;
};

// 创建 Context，初始值设为 null，后续由 Provider 注入实际状态
const GlobalStateContext = createContext<GlobalStateType | null>(null);

// 全局状态 Provider 组件，包裹需要访问状态的子组件
export const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
  // 初始化全局计数器为 0
  const [globalNumber, setGlobalNumber] = useState(0);

  return (
    <GlobalStateContext.Provider value={{ globalNumber, setGlobalNumber }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

// 自定义 Hook，简化全局状态的获取逻辑
export const useGlobalState = () => {
  const context = useContext(GlobalStateContext);
  if (!context) {
    throw new Error('useGlobalState 必须在 GlobalStateProvider 内部使用');
  }
  return context;
};

2. 修改根组件注入全局状态 #

更新 index.tsx，用 GlobalStateProvider 包裹路由组件：

import React from "react";
import ReactDOM from "react-dom/client";

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import App1 from "./App1";
import App2 from "./App2";
// 导入全局状态 Provider
import { GlobalStateProvider } from "./GlobalStateContext";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    {/* 用 Provider 包裹整个路由系统，让所有子组件都能访问全局状态 */}
    <GlobalStateProvider>
      <Router>
        <Routes>
          <Route path="/app1" element={<App1 />} />
          <Route path="/app2" element={<App2 />} />
        </Routes>
      </Router>
    </GlobalStateProvider>
  </React.StrictMode>
);

3. 在路由组件中读写全局状态 #

修改 App1.tsx（写状态）：

// 导入自定义 Hook
import { useGlobalState } from "./GlobalStateContext";

const App1 = () => {
  // 获取全局状态和更新方法
  const { globalNumber, setGlobalNumber } = useGlobalState();
  return (
    <button
      onClick={() => {
        setGlobalNumber(globalNumber + 1);
      }}
    >
      Click me to increment global number!
    </button>
  );
};
export default App1;

修改 App2.tsx（读状态）：

// 导入自定义 Hook
import { useGlobalState } from "./GlobalStateContext";

const App2 = () => {
  // 获取全局状态值
  const { globalNumber } = useGlobalState();
  return <h1>Global number is currently: {globalNumber}</h1>;
};
export default App2;

实现效果 #

在 /app1 页面点击按钮递增计数器后，切换到 /app2 页面就能看到更新后的数值，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Steinn Hauser Magnússon