React+react-router-dom登录后管理员路径URL未更新问题求解

根因分析 #

你触发的login action是异步操作，请求后端接口、更新Redux store中的userInfo都需要时间。你在dispatch(login)之后立刻读取userInfo判断跳转，此时拿到的是本次渲染周期的旧值，还没更新为最新的登录结果。普通用户能跳转大概率是之前登录过，旧的普通用户userInfo残留在store中，误触发了跳转逻辑。

修复方案 #

将跳转逻辑从提交函数中移除，改为通过useEffect监听userInfo的变化触发跳转，修改后的代码如下：

1. 首先在React导入中新增useEffect

import React, { useState, useEffect } from "react";

2. 在组件内新增副作用监听逻辑，提交函数只保留触发登录请求的逻辑：

// 新增监听登录状态的副作用
useEffect(() => {
  if (userInfo) {
    userInfo.isAdmin ? history.push("/admin/dashboard") : history.push("/");
  }
}, [userInfo, history]);

const submitHandler = (e) => {
  e.preventDefault();
  dispatch(login(email, password));
};

额外说明 #

该方案同时覆盖了已登录用户访问登录页的场景，只要userInfo存在（包括页面刷新从localStorage读取后更新到store的场景），就会自动按身份跳转对应页面，不需要用户重复登录。
如果你使用的是react-router v6版本，将history.push替换为useNavigate钩子返回的navigate方法即可，逻辑完全一致。

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