Electron-Vite-React路由切换时Context状态丢失问题求助

我开发了一个Electron-Vite React（TSX）应用，刚接触该技术栈，可能因对部分概念细节理解不足遇到问题：

• 通过UserProvider（Context）从localStorage获取登录后的currentUser数据，用于侧边栏显示最近文件、配置页展示用户偏好等场景。
• 应用启动时显示登录表单，用户输入邮箱登录后，currentUser数据从localStorage取出，可正常进入主页；但点击任何路由（如主页、配置页等）时，会被重定向回登录页。
• 观察到控制台日志在路由切换时被清空，推测应用可能重新挂载，但登录后currentUser确实已正确获取。

相关代码 #

App.tsx #

import { FC, useEffect } from 'react'
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';

import AppLayout from './layouts/AppLayout';
import HomePage from './pages/HomePage';
import ProjectPage from './pages/ProjectPage';
import ScenarioPage from './pages/ScenarioPage';
import ConfigurationPage from './pages/ConfigurationPage';

import { ProjectProvider } from "./context/ProjectContext";
import { UserProvider, useUser } from "./context/UserContext";

import { Login } from "./components/Login";

const App: FC = () => {
    return (
        <UserProvider>
            <ProjectProvider>
                <Router>
                    <ProtectedRoutes />
                </Router>
            </ProjectProvider>
        </UserProvider>
    );
};

// Component for conditional rendering of routes
const ProtectedRoutes: FC = () => {
    const { currentUser, setCurrentUser } = useUser();

    const handleLoginSuccess = (email: string) => {
        setCurrentUser(email);
    };

    // For testing
    useEffect(() => {
        console.log('ProtectedRoutes - currentUser:', currentUser);
    }, [currentUser]);

    if (!currentUser) {
        return (
            <div className="flex h-screen items-center justify-center">
                <Login onLoginSuccess={handleLoginSuccess} />
            </div>
        );
    }

    // Main layout wrapping all pages
    return (
        <Routes>
            <Route path="/" element={<AppLayout />}>
                <Route index element={<HomePage />} />
                <Route path="project" element={<ProjectPage />} />
                <Route path="scenario/:id" element={<ScenarioPage />} />
                <Route path="configuration" element={<ConfigurationPage />} />
            </Route>
        </Routes>
    );
};

export default App;

AppLayout.tsx #

import { FC } from 'react';
import { Outlet } from 'react-router-dom';
import AppSidebar from '../components/AppSidebar';
import AppHeader from '../components/AppHeader';
import { SidebarProvider } from "../components/ui/sidebar";

const AppLayout: FC = () => {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main className="flex flex-col w-full h-screen">
        <AppHeader />
        <div className="flex flex-1 overflow-auto">
          <Outlet />
        </div>
      </main>
    </SidebarProvider>
  );
};

export default AppLayout;

疑问 #

1. 这种路由切换时应用重新挂载是否正常？
2. 代码存在什么问题？
3. 如何正确解决该问题以遵循最佳实践？（我考虑过每次路由切换从SessionStorage读取数据，但认为不够高效。）

1. 路由切换时应用重新挂载是否正常？ #

不正常。正常React路由切换只会更新匹配的组件，不会触发整个应用的重新挂载。控制台日志被清空大概率是Context状态丢失，导致ProtectedRoutes重新判断为未登录，而非Electron窗口重载。

2. 代码核心问题 #

问题出在UserProvider的状态持久化逻辑（你未提供该部分代码，但结合症状可推断）：

• 初始化时未从localStorage读取保存的currentUser，或者setCurrentUser调用时没有将数据同步到localStorage，导致路由切换时Context状态重置为初始空值，触发登录页跳转。
• 另外，Electron环境下使用MemoryRouter可能存在状态保留问题，它不会将路由状态同步到URL，某些操作可能导致路由上下文重置。

3. 最佳实践解决方案 #

第一步：修复UserProvider的持久化逻辑 #

确保初始化时从localStorage读取数据，状态更新时同步存储：

// context/UserContext.tsx
import { createContext, useContext, useState, useEffect, FC, ReactNode } from 'react';

interface UserContextType {
  currentUser: string | null;
  setCurrentUser: (user: string | null) => void;
}

const UserContext = createContext<UserContextType | undefined>(undefined);

export const UserProvider: FC<{ children: ReactNode }> = ({ children }) => {
  // 初始化时优先读取localStorage
  const [currentUser, setCurrentUser] = useState<string | null>(() => {
    return localStorage.getItem('currentUser') || null;
  });

  // 状态变更时同步到localStorage
  useEffect(() => {
    if (currentUser) {
      localStorage.setItem('currentUser', currentUser);
    } else {
      localStorage.removeItem('currentUser');
    }
  }, [currentUser]);

  const value = {
    currentUser,
    setCurrentUser: (user: string | null) => {
      setCurrentUser(user);
    }
  };

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser必须在UserProvider内部使用');
  }
  return context;
};

第二步：调整路由保护逻辑，处理初始加载 #

避免因localStorage读取的短暂间隙显示登录页：

const ProtectedRoutes: FC = () => {
    const { currentUser, setCurrentUser } = useUser();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        // 同步读取localStorage无需等待，直接结束加载态
        setIsLoading(false);
    }, []);

    const handleLoginSuccess = (email: string) => {
        setCurrentUser(email);
    };

    if (isLoading) {
        return <div className="flex h-screen items-center justify-center">加载中...</div>;
    }

    if (!currentUser) {
        return (
            <div className="flex h-screen items-center justify-center">
                <Login onLoginSuccess={handleLoginSuccess} />
            </div>
        );
    }

    return (
        <Routes>
            <Route path="/" element={<AppLayout />}>
                <Route index element={<HomePage />} />
                <Route path="project" element={<ProjectPage />} />
                <Route path="scenario/:id" element={<ScenarioPage />} />
                <Route path="configuration" element={<ConfigurationPage />} />
            </Route>
        </Routes>
    );
};

第三步：替换MemoryRouter为HashRouter（Electron推荐） #

MemoryRouter不保留路由状态到URL，Electron应用中推荐用HashRouter，通过URL的hash段存储路由，更稳定：

// App.tsx中替换路由导入
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

关于SessionStorage的顾虑 #

你的判断是对的，每次路由切换读取SessionStorage既低效又会引发不必要的重渲染。通过Context配合localStorage持久化，只在初始化时读取一次，状态更新时自动同步，是更符合React最佳实践的方案。

内容的提问来源于stack exchange，提问作者Alexandre Landry