React 18异步回调中批量更新失效问题求助

你的核心问题是：异步登录场景下，dispatch(setToken) 触发的 UnauthorizedRoute 重定向会覆盖 history.push('/welcome-page')，导致用户被跳转到根页面而非目标页面。而同步场景下正常，是因为 React 18 的批量更新机制让路由跳转和状态更新的处理顺序更合理，避免了冲突。

问题根源 #

1. 你当前的 UnauthorizedRoute 在渲染阶段直接根据 token 决定是否重定向，当异步登录完成后，dispatch(setToken) 会立即触发组件重渲染，此时 history.push 还未完成路由跳转，UnauthorizedRoute 检测到 token 存在，会渲染 <Redirect to="/" />，这个重定向操作会覆盖后续的 history.push。
2. 同步场景下，dispatch 和 history.push 处于同一个同步代码块，React 18 的自动批量更新会合并这两个操作的状态变更，路由跳转优先生效，UnauthorizedRoute 还没来得及触发重定向，用户已经离开 /login 路由。

解决方案 #

方案一：通过状态变化驱动路由跳转（推荐）

修改 LoginPage，通过 useEffect 监听 token 的变化，当 token 从 null 变为有效值时再执行路由跳转，避免和 UnauthorizedRoute 的重定向逻辑冲突。

// LoginPage.jsx
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { tokenSelector, setToken } from '../redux/slices/access';
import LoginForm from './LoginForm';

const LoginPage = ({ history }) => {
  const token = useSelector(tokenSelector);
  const dispatch = useDispatch();

  // 监听token变化，登录成功后自动跳转
  useEffect(() => {
    if (token) {
      history.push('/welcome-page');
    }
  }, [token, history]);

  const handleOnSubmit = async (formValues) => {
    const token = await backendApi.getToken(formValues);
    dispatch(setToken(token));
  };

  return <LoginForm onSubmit={handleOnSubmit} />;
};

同时调整 UnauthorizedRoute 的逻辑，只在用户主动访问该路由时检查 token 并重定向，避免在路由内部的状态变化时触发重定向：

// UnauthorizedRoute.jsx
import { useEffect } from 'react';
import { Route, useHistory, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { tokenSelector } from '../redux/slices/access';

const UnauthorizedRoute = ({ exact, path, children }) => {
  const token = useSelector(tokenSelector);
  const history = useHistory();
  const location = useLocation();

  // 仅当用户导航到该路由时，检查token并决定是否重定向
  useEffect(() => {
    if (token && location.pathname === path) {
      history.replace('/');
    }
  }, [location.pathname, token, history, path]);

  // 无token时渲染路由内容，有token时不渲染（已通过useEffect重定向）
  return !token ? (
    <Route exact={exact} path={path}>
      {children}
    </Route>
  ) : null;
};

方案二：调整操作顺序（简化版）

如果不想修改太多代码，可以先执行路由跳转，再更新 token，同时给目标页面（WelcomePage）添加加载状态，等待 token 生效：

// LoginPage.jsx 中的handleOnSubmit
const handleOnSubmit = async (formValues) => {
  const token = await backendApi.getToken(formValues);
  // 先跳转，再更新token
  history.push('/welcome-page');
  dispatch(setToken(token));
};

// WelcomePage.jsx
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { tokenSelector } from '../redux/slices/access';

const WelcomePage = ({ history }) => {
  const token = useSelector(tokenSelector);

  // 如果token未生效，跳回登录页
  useEffect(() => {
    if (!token) {
      history.push('/login');
    }
  }, [token, history]);

  if (!token) {
    return <div>登录中...</div>;
  }

  return <div>欢迎访问首页！</div>;
};

为什么 unstable_batchedUpdates 没用？ #

unstable_batchedUpdates 只能包裹 React 自身的状态更新（比如 setState），而 history.push 是 React Router 的路由操作，虽然会触发 React 组件更新，但和 Redux 的 dispatch 属于不同的状态源，无法被完全批量合并，因此无法解决重定向覆盖的问题。

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