react-router-dom useNavigate状态变更后未触发跳转问题排查

你的跳转不生效核心是两个问题：

1. 跳转路径写反：登录成功（user.userName存在，代表已拿到登录态）的逻辑里，你写的跳转目标是/login，也就是当前所在的登录页路径。React Router 检测到跳转目标和当前路径一致时，默认不会执行任何跳转操作，所以你看起来重定向逻辑完全没触发。而你要跳转的主页对应的路由路径是/。
2. 跳转逻辑缺少合理配置：登录场景下的跳转应该用替换模式，避免用户点击浏览器回退按钮再次回到登录页。

调整Login.js中的useEffect逻辑即可，其余路由配置、Store包裹配置都是正确的，不需要改动：

const dispatch = useDispatch();
const user = useSelector((store) => store.user);
const navigate = useNavigate();
const onSubmitForm = (e) => {
  e.preventDefault();
  dispatch({
    type: FETCH_USER,
    payload: { login: user.login, password: user.password },
  });
}

useEffect(() => {
  if(user.userName) {
    // 跳转至主页，开启replace模式替换路由栈记录
    navigate("/", { replace: true });
  }
}, [user.userName, navigate])

如果修改后仍有异常，按顺序检查：

• 确认FETCH_USER对应的reducer逻辑正确，登录接口请求成功后才会给user.userName赋值，不要在请求 pending 阶段就把userName设为真值
• 确认store中user模块的初始状态里，userName的初始值是undefined/null/空字符串这类假值，避免页面刚加载就触发跳转判断
• 确认没有其他路由守卫逻辑拦截了根路径/的访问，导致跳转被强制打回登录页

内容的提问来源于stack exchange，提问作者Николай Краснов