useLocation()与history.location.pathname不同步问题求助

核心问题根源 #

你遇到的useLocation().pathname与history.location.pathname不同步问题，主要有两个原因：

1. 库版本不兼容：react-router-redux@4.0.8是为React Router 4/5设计的，完全不支持React Router 6，它的存在会打乱RR6的路由状态同步机制。
2. 渲染时序不匹配：React 18的并发渲染特性，加上你直接操作history.push的逻辑，导致Redux中的history状态更新后，React Router内部的location上下文还未同步更新，从而出现第二次渲染时两者不一致的情况。

具体解决方案 #

1. 移除废弃的react-router-redux

直接删除这个依赖——它已经停止维护，且和RR6的路由机制完全不兼容。redux-first-history本身已经能实现路由状态同步到Redux的需求，不需要额外依赖。

2. 改用React Router原生方式实现路由守卫

不要直接通过history.push做重定向，而是用RR6的<Navigate>组件结合状态判断，确保路由状态和组件渲染同步：

import { useLocation, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

// 封装路由守卫组件
const AuthGuard = ({ children }) => {
  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
  const currentPath = useLocation().pathname;

  // 已登录但访问/forbidden时，直接重定向到dashboard
  if (isLoggedIn && currentPath === '/forbidden') {
    return <Navigate to="/dashboard" replace />;
  }

  // 其他权限逻辑（比如未登录跳转登录页）
  if (!isLoggedIn) {
    return <Navigate to="/login" replace state={{ from: currentPath }} />;
  }

  return children;
};

然后在路由配置中使用这个守卫包裹需要保护的路由：

<Routes>
  <Route path="/dashboard" element={<AuthGuard><Dashboard /></AuthGuard>} />
  <Route path="/forbidden" element={<AuthGuard><Forbidden /></AuthGuard>} />
  {/* 其他路由 */}
</Routes>

3. 确保history实例全局唯一

检查redux-first-history的配置，保证传给React Router的<Router>组件的history实例，和Redux中使用的是同一个：

import { createBrowserHistory } from 'history';
import { createReduxHistoryContext } from 'redux-first-history';

// 创建全局唯一的history实例
const history = createBrowserHistory();

// 关联Redux
const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
  history,
  // 其他配置项
});

// 在Redux store中注册reducer和middleware
// 最后在App组件中使用<Router history={history}>包裹路由

为什么第二次渲染会出现不一致？ #

React 18的并发渲染会优化渲染流程，当你直接调用history.push时，Redux中的history状态会先更新，但React Router内部的location上下文需要等待下一次渲染周期才能同步。这就导致第二次渲染时，useLocation拿到的还是旧路径，而Redux中的history已经是新值，最终错误渲染了Forbidden组件。改用<Navigate>组件则会直接触发React Router的上下文更新，保证两者状态同步。

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