React Context切换页面时状态重置问题求助

核心排查方向及解决方案 #

1. 检查路由跳转方式是否触发页面刷新 #

如果NavbarSimple组件里用了原生<a>标签跳转路由，会导致整个页面刷新，Context中useState的初始值会被重置为false。

修复方式：
把所有原生<a>标签替换成React Router的<Link>组件：

// NavbarSimple.jsx
import { Link } from 'react-router-dom';
import { useContext, useEffect } from 'react';
import { IsSignedUpContext } from './context/Context';

function NavbarSimple() {
  const { setIsSignedUp } = useContext(IsSignedUpContext);

  // 组件挂载时设置状态为true
  useEffect(() => {
    setIsSignedUp(true);
  }, [setIsSignedUp]);

  return (
    <nav>
      <Link to="/dashboard">Dashboard</Link>
      <Link to="/userprofile">个人资料</Link>
      {/* 其他路由链接 */}
    </nav>
  );
}

2. 确认Context使用逻辑正确性 #

确保所有依赖isSignedUp状态的组件，都是通过useContext获取状态，而非自行创建局部状态。同时检查Protected组件是否存在错误逻辑，比如意外重置状态或导致Provider重新挂载。

3. 持久化状态避免页面刷新丢失 #

如果允许页面刷新后保留状态，可以把状态持久化到localStorage，修改IsSignedUpProvider代码：

import { createContext, useState, useEffect } from 'react';
export const IsSignedUpContext = createContext();

export const IsSignedUpProvider = ({ children }) => {
  // 从localStorage读取初始值，避免页面刷新重置
  const [isSignedUp, setIsSignedUp] = useState(() => {
    return localStorage.getItem('isSignedUp') === 'true';
  }); 

  // 状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('isSignedUp', isSignedUp.toString());
  }, [isSignedUp]);

  console.log(isSignedUp);

  return (
    <IsSignedUpContext.Provider value={{ isSignedUp, setIsSignedUp }}>
      {children}
    </IsSignedUpContext.Provider>
  );
};

4. 检查App组件是否被重复挂载 #

查看App的父组件（比如index.js）是否存在导致App频繁重新挂载的逻辑，比如不必要的状态变化或条件渲染。确保IsSignedUpProvider只初始化一次，不会被意外卸载重装。

内容的提问来源于stack exchange，提问作者Allen Bastian