React Router登录页页面刷新阻止弹窗弹出的解决方法

问题根源 #

1. Loading状态判断逻辑缺陷：原代码仅在loading且!user时返回占位组件，若loading期间user状态有变化，会继续执行后续路由逻辑，导致组件反复渲染。
2. 渲染期间调用导航副作用：直接使用navigate(-1)属于渲染期副作用，会触发组件重新渲染，可能引发循环刷新。
3. User状态频繁更新：登录失败后user状态被频繁修改（比如从null变为含account但activeUser: false的对象），导致路由守卫组件反复执行逻辑，页面持续刷新。

修复步骤 #

1. 修正Loading状态处理 #

只要处于加载状态就返回占位组件，阻断后续逻辑执行，避免加载波动引发的重复渲染：

// 原代码
if (loading && !user) return <>></>;

// 修改后
if (loading) return <></>; // 可替换为项目内的自定义加载组件

2. 替换导航方式为组件形式 #

将直接调用navigate改为返回Navigate组件，规避渲染期副作用：

// 原代码（以PROFILE_MANAGEMENT_STYLE为例）
case PROFILE_MANAGEMENT_STYLE:
  if (unauthorizedCategory.includes(user?.account?.category?.categoryCode)) {
    navigate(-1);
  } else {
    return <Outlet />;
  }

// 修改后
case PROFILE_MANAGEMENT_STYLE:
  if (unauthorizedCategory.includes(user?.account?.category?.categoryCode)) {
    return <Navigate to={-1} replace />;
  } else {
    return <Outlet />;
  }

对SITUATIONS_ANNUAL_INTERVIEW、SITUATIONS_REFOCUSING_INTERVIEW两个路由做相同修改。

3. 稳定User状态 #

检查useUser钩子实现：

• 登录失败时，仅更新错误信息，不要频繁修改user核心对象。
• 避免登录失败后触发不必要的用户信息重请求，防止user状态循环更新。

4. 优化路由逻辑判断 #

将允许的路由列表改为数组包含判断，保持逻辑简洁性：

else {
  console.log("1");

  if (user?.account?.firstConnection === true && location.pathname === P1_SURVEY_PROFILE) {
    console.log("3");
    return <Outlet />;
  } else if (
    [LOGIN, RENEW_PASSWORD, CHANGE_PASSWORD, RESET_PASSWORD].includes(location.pathname)
  ) {
    console.log("4");
    return <Outlet />;
  } else {
    return (
      <Navigate
        to={user?.account?.firstConnection === true ? P1_SURVEY_PROFILE : LOGIN}
        replace
        state={{ from: location }}
      />
    );
  }
}

验证效果 #

修改后测试登录流程：

• 输入错误密码时，控制台不再交替打印1和4，路由守卫稳定渲染登录页内容。
• 密码错误提示弹窗可正常显示，页面无重复刷新。

内容的提问来源于stack exchange，提问作者Florie Anstett