React Router v6登录后URL变更但组件未渲染问题求助

核心问题 #

1. Redux reducer中直接操作history不符合规范：reducer必须是纯函数，不能包含导航这类副作用操作，且你使用的history.push可能和BrowserRouter的路由实例不关联，导致URL变化但组件未更新。
2. 状态更新顺序错误：先执行路由跳转，再更新Redux的isAuthenticated状态，此时ProtectedRoute拿到的还是旧状态，可能触发不必要的跳转逻辑。
3. token判断逻辑有误：localStorage.getItem("token") !== ""在token不存在时（返回null）会被判定为true，导致isAuthenticated状态不准确。

具体修复步骤 #

1. 移除Redux reducer中的导航逻辑，将跳转移至Login组件

Redux reducer只负责状态更新，导航属于副作用，应在组件内通过react-router提供的钩子处理：

在Login组件中修改：

import { useNavigate, useEffect } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { login } from "path/to/your/loginSlice";
import { RootState } from "src/store";

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { isAuthenticated, loading } = useSelector((state: RootState) => state.login);

  // 监听登录状态，成功后跳转至dashboard
  useEffect(() => {
    if (isAuthenticated && !loading) {
      navigate("/dashboard", { replace: true });
    }
  }, [isAuthenticated, loading, navigate]);

  // 登录处理函数示例
  const handleLogin = async (loginData: any) => {
    try {
      await dispatch(login(loginData)).unwrap();
    } catch (err) {
      // 处理登录失败逻辑
      console.error("登录失败", err);
    }
  };

  // 渲染登录表单...
  return <div>Login Form</div>;
};

export default Login;

2. 修复Redux login.fulfilled的状态更新逻辑

修正token判断逻辑，确保isAuthenticated状态准确，同时移除reducer中的导航代码：

builder.addCase(login.fulfilled, (state, action) => {
  const token = localStorage.getItem("token");
  // 用!!token判断token是否存在且非空
  const isAuthenticated = !!token;

  return {
    ...state,
    loading: false,
    isAuthenticated,
    token,
    ...action.payload,
  };
});

3. 优化ProtectedRoute的加载状态（可选）

当前loading时返回null会导致页面空白，可替换为加载组件提升体验：

const ProtectedRoute = () => {
  const location = useLocation();
  const { isAuthenticated, loading } = useSelector(
    (state: RootState) => state.login
  );

  if (loading) {
    return <div>加载中...</div>; // 替换为你的加载组件
  }

  return isAuthenticated ? (
    <Outlet />
  ) : (
    <Navigate to="/login" replace state={{ from: location }} />
  );
};

额外验证点 #

• 确保登录成功后，token已正确存入localStorage（这部分逻辑应放在登录的thunk函数中，而非reducer）。
• 若用户已登录时访问/login，Login组件中的useEffect会自动跳转至/dashboard，避免重复登录。

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