React Router Dom v6共享组件useLocation上下文报错及版本适配问题

根本原因 #

你遇到的错误本质是重复实例导致的上下文不匹配：

• 组件库同时在dependencies和peerDependencies中声明了react-router-dom@^6.4.3，这会让组件库在安装时自带一份独立的react-router-dom实例。
• 消费项目使用的是react-router-dom@^6.3.0，属于另一个独立实例。
• React Router的上下文（比如<Router>提供的）是绑定到具体实例的，组件库的useLocation调用的是自己实例的钩子，自然找不到消费项目实例中<Router>提供的上下文。

解决方案 #

1. 修正组件库的依赖声明 #

必须将react-router-dom从组件库的dependencies中彻底移除，只保留在peerDependencies里。

修改组件库的package.json：

{
  "dependencies": {
    // 移除react、react-dom、react-router-dom
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": ">=6.3.0 <7.0.0" // 放宽版本范围，兼容消费项目的6.3.0
  }
}

这样配置后，组件库会直接使用消费项目中已安装的react-router-dom实例，上下文就能保持一致。

2. 关于版本对齐的问题 #

• 如果把组件库的peerDependencies设为^6.4.3，消费项目的6.3.0不满足版本要求，包管理器会抛出警告，此时必须由消费者手动升级到6.4.3及以上版本才能解决问题。
• 更合理的做法是放宽peerDependencies的版本范围（比如>=6.3.0 <7.0.0），只要组件使用的API（useLocation）在目标版本中存在即可（React Router v6全版本都支持useLocation），这样消费项目无需升级就能正常使用。

验证步骤 #

1. 重新打包并发布修改后的组件库。
2. 在消费项目中重新安装组件库，通过npm ls react-router-dom或yarn list react-router-dom检查，确保node_modules中只有一份react-router-dom实例。
3. 重启消费项目，错误应该会消失。

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