react-router v6集成redux-first-history跳转pathname undefined报错

问题根因 #

路由跳转时抛出Cannot read properties of undefined (reading 'pathname')错误，核心原因是依赖版本不兼容，叠加少量导入写法不规范问题，和业务逻辑代码无关。

修复步骤 #

• 对齐history库版本：react-router v6全系列目前仅兼容history v5版本，安装v6版history会因内部API结构变更，导致路由上下文无法读取location对象。执行以下命令重装适配版本：

npm uninstall history
npm install history@^5.3.0

使用yarn/pnpm的替换为对应包管理命令即可。

• 升级redux-first-history到最新稳定版：5.0.0以下版本对react-router v6的HistoryRouter适配存在已知bug，直接升级到最新版即可规避。

npm install redux-first-history@latest

• 统一路由组件导入来源：将routes.jsx中Routes、Route的导入路径从react-router改为react-router-dom，和页面中Link组件的导入来源保持一致，避免多版本react-router共存导致路由上下文丢失。
  修改后的导入代码：

import { Routes, Route } from "react-router-dom";

• 清理缓存重启服务：删除node_modules目录和对应包管理的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装后启动开发服务，路由跳转即可恢复正常。

现有代码无需调整的部分 #

• store配置中routerReducer挂载在router键下的写法正确
• 传给<HistoryRouter>的history对象使用createReduxHistory(store)生成的包装实例的写法正确
• 从redux-first-history/rr6路径导入HistoryRouter的写法正确

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