React地址栏跳转页面时UserContext数据丢失的修复咨询

问题根源 #

React的useState和Context存储的数据仅存在于应用运行时的内存中。当通过浏览器地址栏直接跳转页面时，整个React应用会重新加载，内存中的所有状态都会被重置，导致用户信息丢失。

解决思路 #

将用户信息持久化到浏览器的本地存储（localStorage）中，在应用初始化时从本地存储恢复用户状态，这样即使页面刷新或通过地址栏跳转，用户信息也不会丢失。

具体修改步骤 #

1. 修改App.js，实现状态持久化 #

在App组件中，让userinfo的初始值从localStorage读取，同时监听userinfo变化，自动同步到localStorage：

import React, { useState , useEffect } from "react";
import { Routes,  Route } from "react-router-dom";

import Home          from './Components/Home';
import LoginPage     from './Components/LoginPage';
import AdminPanelApp from './Components/Dashboard/AdminPanelApp';

//Context
import UserContext from "./Context/user";

function App(){
    // 从localStorage读取初始用户信息，无数据则用默认值
    const [ userinfo , setuserinfo ] = useState(() => {
        const savedUser = localStorage.getItem('userinfo');
        return savedUser ? JSON.parse(savedUser) : {
            userid        : ''  ,
            user_name     : ''  ,
            email         : ''  ,
            token         : ''  , 
        };
    });

    // 监听userinfo变化，同步到localStorage
    useEffect(() => {
        localStorage.setItem('userinfo', JSON.stringify(userinfo));
    }, [userinfo]);

    return(
        <UserContext.Provider value = {{
            userinfo,
            setuserinfo
        }}>
            <Routes>
                <Route path="/"            element= { <LoginPage     /> } />
                <Route path="/Login"       element= { <LoginPage     /> } />
                <Route path="/admin-panel" element= { <AdminPanelApp /> } />
            </Routes>
        </UserContext.Provider>
    );
}

export default App;

2. 修复AdminPanelApp中的代码错误 #

当前AdminPanelApp存在笔误，{ user.state.token }应改为{ userinfo.token }，否则会引发报错：

function AdminPanelApp () {
    let navigate = useNavigate();
    const userContext  = useContext(UserContext);
    let { userinfo } = userContext;

    if (userinfo.token){
        return (
            <>
                <h1>{ userinfo.token }</h1>
            </>
        )
    } else {
        navigate('/Login');
    }
}

3. 可选：退出登录时清除本地存储 #

如果后续需要添加退出登录功能，记得清除localStorage中的用户信息并重置Context：

const handleLogout = () => {
    setuserinfo({
        userid: '',
        user_name: '',
        email: '',
        token: '',
    });
    localStorage.removeItem('userinfo');
    navigate('/Login');
};

原理说明 #

• localStorage是浏览器提供的持久化存储方案，数据会保存在用户本地，除非主动清除，否则不会消失。
• 应用启动时从localStorage读取用户信息，保证初始状态包含已登录的用户数据。
• 每次用户信息变化时同步到localStorage，确保内存状态与本地存储数据一致。

内容的提问来源于stack exchange，提问作者Single.Traveler