React.js路由间上下文状态值重置问题求助

尝试在React Context中跨路由维护状态，但路由切换时状态会被重置，且每次路由切换都会触发useEffect中的getData函数重新获取数据，导致状态被覆盖。使用的依赖版本：

• react-router-dom: ^6.8.0
• react-dom: ^18.2.0
• react: ^18.2.0

原代码存在两个核心问题：

1. 语法错误引发组件异常重新挂载 #

• 导出语法错误：export default const App = () => {} 是无效语法，会导致组件导出异常，触发React渲染逻辑出错，进而引发组件重复挂载。
• JSX闭合标签错误：</<GlobalContextProvider /> 写法错误，正确应为</GlobalContextProvider>，该错误同样会导致渲染异常，让组件反复挂载卸载。

2. 状态维护结构不合理 #

原代码将状态放在App组件中，一旦App因异常重新挂载，状态就会被重置。更合理的做法是将状态直接托管在Context Provider内部，确保状态生命周期独立于路由切换。

解决方案 #

步骤1：修复基础语法错误

修正App组件的导出方式和JSX闭合标签，避免渲染异常：

import { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import axios from 'axios';
import GlobalContextProvider from './GlobalContextProvider';
import HomePage from './HomePage';
import PostPage from './PostPage';

// 正确的组件导出方式
export default function App() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const getData = async () => {
    setLoading(true);
    try {
      const response = await axios.get("url", { withCredentials: true });
      setData(response.data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 仅在组件首次挂载时执行一次数据获取
  useEffect(() => {
    getData();
  }, []);

  const GlobalContextValue = {
    data,
    loading,
  };

  return (
    <>
      <GlobalContextProvider value={GlobalContextValue}>
        <BrowserRouter>
          <Routes>
            <Route index element={<HomePage />} />
            <Route path="/:slug" element={<PostPage />} />
          </Routes>
        </BrowserRouter>
      </GlobalContextProvider>
    </>
  );
}

步骤2：优化Context结构（推荐方案）

将状态维护逻辑移到Context Provider内部，彻底隔离路由切换对状态的影响：

1. 创建GlobalContextProvider.js：

import { createContext, useState, useEffect } from 'react';
import axios from 'axios';

export const GlobalContext = createContext();

export default function GlobalContextProvider({ children }) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const getData = async () => {
    setLoading(true);
    try {
      const response = await axios.get("url", { withCredentials: true });
      setData(response.data);
    } catch (error) {
      console.error('数据获取失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 仅在Provider挂载时执行一次数据请求
  useEffect(() => {
    getData();
  }, []);

  return (
    <GlobalContext.Provider value={{ data, loading }}>
      {children}
    </GlobalContext.Provider>
  );
}

2. 简化App.js：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import GlobalContextProvider from './GlobalContextProvider';
import HomePage from './HomePage';
import PostPage from './PostPage';

export default function App() {
  return (
    <BrowserRouter>
      <GlobalContextProvider>
        <Routes>
          <Route index element={<HomePage />} />
          <Route path="/:slug" element={<PostPage />} />
        </Routes>
      </GlobalContextProvider>
    </BrowserRouter>
  );
}

原理说明 #

• 修复语法错误后，App组件不会因渲染异常重复挂载，useEffect仅在首次挂载时执行一次，避免路由切换时重复请求数据。
• 将状态移到Context Provider内部后，Provider作为路由的父组件，路由切换时不会被卸载，状态会被持久化保存，不会随路由切换重置。

内容的提问来源于stack exchange，提问作者45hw1n .4