Javascript 当我回到父组件时上下文很清楚

从登录页面上的API接收用户数据并在用户上下文中进行设置，在重定向到AdminPanelApp之后，用户上下文中的数据将正确显示. 但当我在AdminPanelApp上时，当我的上下文包含用户信息时，我通过地址栏转到登录页面，所有上下文用户信息都会被删除.

我如何修复该问题，使上下文信息不会被删除

picture of my app个

App.js:个

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(){
    
        const [ userinfo , setuserinfo ] = useState({
            userid        : ''  ,
            user_name     : ''  ,
            email         : ''  ,
            token         : ''  , 
        });
    
        return(
            <UserContext.Provider value = {
               {
                userinfo : userinfo ,
                setuserinfo
               }
            }>
                <Routes>
                    <Route path="/"            element= { <LoginPage     /> } />
                    <Route path="/Login"       element= { <LoginPage     /> } />
                    <Route path="/admin-panel" element= { <AdminPanelApp /> } />
                </Routes>
    
            </UserContext.Provider>
    
        );
    }
    
    export default App;

登录Page.js:

import React , { useState , useEffect , useContext } from "react";
import { useNavigate } from "react-router-dom";
import UserContext from '../Context/user';
import '../assets/css/LoginPage.css';
import axios from "axios";

function LoginPage () {

    let navigate = useNavigate();
    const userContext  = useContext(UserContext);
    let { userinfo } = userContext;
    const [ UserNameInput  , setUserNameInput ] = useState('');
    const [ PasswordInput  , setPasswordInput ] = useState('');

    const UserNameInputHandler = (e) => {
        setUserNameInput(e.target.value)
    }

    const PasswordInputHandler = (e) => {
        setPasswordInput(e.target.value)
    }

    let FormHandler = (e)=> {

        e.preventDefault();

        axios.post(
            `http://127.0.0.1:8000/api/login`,
            {
                email    : UserNameInput  ,
                password : PasswordInput
            }
        ).then( response => {
                
                if( response.data.token ) { 
                    
                    userContext.setuserinfo({
                        userid        : response.data.userid      ,
                        user_name     : response.data.user_name   ,
                        email         : response.data.user_email  ,
                        token         : response.data.token       , 
                    })

                    navigate('/admin-panel');
                  

                }
            }
        )
         .catch( err => {
            console.log(err);
        })
    
    }

    return (

         <>
            <main>
        <form className="row g-3 needs-validation" method="post">
                      <div className="col-12">                
                           <div className="input-group has-validation">
                                <span className="input-group-text" id="inputGroupPrepend">@</span>
                                <input type="text" name="username" onChange={ UserNameInputHandler } className="form-control " id="yourUsername" required/>                
                            </div>
                           <div className="col-12">
                                <input type="password" name="password" onChange={ PasswordInputHandler } className="form-control " id="yourPassword" required/>
                           </div>
               <div className="col-12">
                                 <button className="btn btn-primary w-100" onClick={(e) => FormHandler(e) } type="submit">submit</button>
                           </div>
                 </form>
            </main>

        </>
    )

}

export default LoginPage;

AdminPage.js:

import React , { useEffect , useContext } from "react";
import { useNavigate } from "react-router-dom";

import UserContext   from '../../Context/user';
import '../../assets/css/style.css';

import Header  from './Layouts/Header';
import Sidebar from './Layouts/Sidebar';
import Footer  from './Layouts/Footer';

import Dashboard from "./Dashboard";


// import axios from "axios";


function AdminPanelApp () {

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

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

export default AdminPanelApp;

UserConext.js:

import React from "react";

const UserContext = React.createContext({
    userinfo      : {}          ,
    setUser       : () => {  }  ,
})

export default UserContext;