切换yarn PnP后react-router-dom的useLocation返回对象结构异常如何解决

核心是Yarn PnP的严格依赖隔离机制触发了react-router相关依赖的多实例共存问题：

• 传统node_modules模式会自动扁平化合并兼容的依赖版本，PnP则会严格保留每个依赖声明的版本，不会主动合并，当你的项目直接依赖的react-router-dom/history版本，和其他子依赖引入的版本不一致时，就会出现两个不同的history实例
• 首次渲染时调用的是你项目直接依赖的react-router-dom实例的useLocation，返回标准location结构；路由切换时触发的是另一个版本的history实例的更新，钩子返回值就变成了包含action和嵌套location的事件结构
• 次要原因可能是代码中同时存在从react-router和react-router-dom两个包导入useLocation的情况，PnP隔离下两个包绑定的history实例不一致，也会导致返回值结构异常

1. 统一依赖版本

• 执行命令检查是否存在多版本共存：

  yarn why react-router-dom
  yarn why history
  

• 若存在多版本，在package.json中添加resolutions字段固定版本，替换为你项目实际使用的兼容版本：

  {
    "resolutions": {
      "react-router-dom": "^你的项目所用版本号",
      "history": "^对应兼容的history版本号"
    }
  }
  

• 配置完成后执行yarn install重新生成依赖树。

2. 统一导入路径
   所有路由相关API都从react-router-dom导入，不要混合使用react-router的导出。

3. 缓存清理
   如果修改后仍未生效，执行以下命令重置依赖：

yarn cache clean
rm -rf .pnp.cjs .yarn/cache
yarn install

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