Redux Store中使用history时无法解析history/createBrowserHistory的编译报错

当前编译报错来自两个层级的问题：

• 直接报错原因：history包未安装，且原有导入写法是history v3时代的旧路径，在v4及以上版本的history包中，history/createBrowserHistory这个子路径已经被移除，无法被webpack解析
• 代码隐藏缺陷：代码中使用了routerMiddleware方法但未导入对应模块来源，且定义的路由中间件没有挂载到store的中间件链中，就算解决模块找不到的问题，后续也会触发未定义、路由状态不生效的报错

1. 安装匹配版本的兼容依赖
   直接安装最新版依赖会触发版本不兼容，需要安装和旧代码写法匹配的版本组合，执行命令：
   npm install history@4.10.1 connected-react-router@6.9.2 react-router-dom@5.3.3
   注意不要不指定版本直接安装最新版依赖，否则会持续触发模块路径不兼容的问题
2. 修正导入路径与模块引用
   替换原有的旧导入逻辑：
   • 把旧的import createHistory from 'history/createBrowserHistory'替换为history v4支持的顶层导出写法import { createBrowserHistory } from 'history'
   • 补充导入routerMiddleware的来源：从connected-react-router中导入routerMiddleware、connectRouter方法
3. 调整store配置逻辑
   • 用connectRouter(history)包装原有reducer，让redux可以正常感知路由状态变化
   • 把自定义的路由中间件和thunk一起传入applyMiddleware，完成中间件挂载

import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import reducer from './reducer';
import thunk from 'redux-thunk'
import { createBrowserHistory } from 'history';
import { routerMiddleware, connectRouter } from 'connected-react-router';

export const history = createBrowserHistory();
const myRouterMiddleware = routerMiddleware(history);

// 包装路由相关的reducer逻辑
const rootReducer = connectRouter(history)(reducer);

export const store = createStore(
  rootReducer, 
  composeWithDevTools(applyMiddleware(thunk, myRouterMiddleware))
);

如果当前项目使用的是react-router-dom v6以上的新版本，上述手动创建history实例、挂载路由中间件到redux的旧写法已经不再适用，无需额外配置history和路由中间件，直接使用v6内置的路由能力即可，强行套用旧写法会持续触发版本兼容问题。

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