在调用身份验证API之后，目的是将身份验证令牌存储在LocalStorage中，然后继续重定向到强制进行令牌验证以进行访问的 Jmeter 板。但是，如果没有立即存储身份验证令牌，就会出现问题。
App.js

import React, { Suspense, useContext, useEffect, useState  } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import routes from './config/routes';
import {Loader, MainLayout} from './intefaces/layouts';
import { AxiosContext, AuthContext } from './context';

export default function App() {
  const { loading } = useContext(AxiosContext);
  const [mount, setMount] = useState(false);
  const [menu, setMenu] = useState([]);

  useEffect(() => {
    const getMenu = routes.map((route, index) => {
      return (route.component) ? (
        <Route 
          key={index}
          path={route.path}
          exact={route.exact}
          name={route.name}
          element={route.auth ? localStorage.getItem('token') ? route.component : 
          <Navigate to='/auth/login' state={{ from: route.path }} /> : route.component}
        />
      ) : null;
    });
    setMenu(getMenu);
    setMount(true);
  }, []);

  return (
    <Suspense fallback={<Loader/>}>
        <MainLayout>
          <Routes>
              {mount && menu}
          </Routes>
        </MainLayout>
    </Suspense>
  );
}

这里是登录提交功能

const handleSubmit = async(event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const loginData = {
      email: data.get('email'),
      password: data.get('password'),
    };
    const user = await login(loginData);
    if (user.token) {
      localStorage.setItem('token', user.token);
      navigate('/');
    } else {
      toast(user);
    }
 };

你有什么见解或建议，为什么这可能会发生在这个节骨眼上？