为什么已登录情况下我从首页输入/login可以正常跳转到我的问卷页，但是中间会闪烁出现登录或者注销页面。我看老师这块没有这个问题，找了半天不知道什么情况导致的？
useNavigatePage 代码：

import { useEffect } from 'react';

import useGetUserInfo from './useGetUserInfo';

import { useLocation, useNavigate } from 'react-router-dom';

import {

  isLoginOrRegisterPage,

  isNotNeedLoginPage,

  LOGIN_PATHNAME,

  MANAGE_INDEX_PATHNAME,

} from '../router';

function useNavigatePage(waitUserData: boolean) {

  const { username } = useGetUserInfo();

  const { pathname } = useLocation();

  const navigate = useNavigate();

  useEffect(() => {

    if (waitUserData) return;

    // 已经登录了

    if (username) {

      // 登录或注册页，跳转到我的问卷页

      if (isLoginOrRegisterPage(pathname)) {

        navigate(MANAGE_INDEX_PATHNAME);

      }

      return;

    }

    // 未登录

    if (isNotNeedLoginPage(pathname)) {

      return;

    } else {

      navigate(LOGIN_PATHNAME);

    }

  }, [waitUserData, username, pathname]);

}

export default useNavigatePage;

MainLayout 代码如下：

import React, { FC } from 'react';

import { Outlet } from 'react-router-dom';

import { Layout, Spin } from 'antd';

import styles from './MainLayout.module.scss';

import Logo from '../components/Logo';

import UserInfo from '../components/UserInfo';

import useLoadUserData from '../hooks/useLoadUserData';

import useNavigatePage from '../hooks/useNavigatePage';

const { Header, Footer, Content } = Layout;

const MainLayout: FC = () => {

  const { loading: waitUserData } = useLoadUserData();

  useNavigatePage(waitUserData);

  return (

    <Layout>

      <Header className={styles.header}>

        <div className={styles.left}>

          <Logo />

        </div>

        <div className={styles.right}>

          <UserInfo></UserInfo>

        </div>

      </Header>

      <Content className={styles.main}>

        {waitUserData ? (

          <div style={{ textAlign: 'center' }}>

            <Spin />

          </div>

        ) : (

          <Outlet />

        )}

      </Content>

      <Footer className={styles.footer}>小慕问卷 &copy;2024-Created by Ryan</Footer>

    </Layout>

  );

};

export default MainLayout;

useLoadUserData 代码如下：

import { useRequest } from 'ahooks';

import { getUserInfoHttp } from '../services/user';

import { useDispatch } from 'react-redux';

import { loginReducer } from '../store/userSlice';

import useGetUserInfo from './useGetUserInfo';

import { useEffect, useState } from 'react';

function useLoadUserData() {

  const [loading, setLoading] = useState(true);

  const dispatch = useDispatch();

  // 手动执行请求

  const { run: getUserInfo } = useRequest(getUserInfoHttp, {

    manual: true,

    onSuccess(result) {

      const { username, nickname } = result;

      // 派发action，更新userInfo，存储到redux中

      dispatch(loginReducer({ username, nickname }));

    },

    onFinally() {

      // 无论请求成功失败，最终设置loading为false

      setLoading(false);

    },

  });

  // 判断当前redux store中是否已经存储了用户信息

  const { username } = useGetUserInfo();

  useEffect(() => {

    if (username) {

      setLoading(false);  // 如果redux中存在用户信息，则不重新加载请求

      return;

    }

    getUserInfo(); 

  }, [username]);

  return { loading };

}

export default useLoadUserData;