安装react-router-dom时遭遇依赖冲突报错的问题咨询

看起来你在安装react-router-dom的时候碰到了npm的依赖冲突问题，我来帮你拆解一下原因和解决办法：

错误原因解析 #

首先来看核心的冲突点：

npm ERR! Could not resolve dependency:
npm ERR! peer react@"~0.14.8 || ^15.0.0 || ^16.0.0" from google-maps-react@2.0.6
npm ERR! Found: react@18.1.0

简单来说：

• 你的项目当前使用的是React 18.1.0，但你项目里已有的google-maps-react@2.0.6这个包，它的「peer依赖」要求React版本必须是~0.14.8 || ^15.0.0 || ^16.0.0（最高只支持React 16），和你当前的React版本完全不兼容。
• 从npm v7开始，npm默认会严格检查peer依赖的兼容性，所以当你执行npm install react-router-dom时，npm会遍历整个依赖树做一致性校验，就触发了这个冲突报错（虽然你装的是react-router-dom，但冲突根源是google-maps-react和现有React版本不匹配）。

解决方案 #

根据你的需求，这里提供几种不同的处理方案：

方案一：替换google-maps-react为兼容React 18的活跃包（最推荐）

google-maps-react已经很久没有维护了（最后一次更新是2020年左右），官方也没有适配React 17/18的计划，所以最稳妥的方式是替换成活跃维护的替代包：

• 推荐选择@react-google-maps/api或者google-map-react，这两个包都支持React 18，且一直在更新。
• 操作步骤：
  1. 先卸载旧的依赖包：

     npm uninstall google-maps-react
     

  2. 安装替代包（以@react-google-maps/api为例）：

     npm install @react-google-maps/api
     

  3. 再正常安装react-router-dom：

     npm install react-router-dom
     

  4. 最后调整项目中使用谷歌地图的代码，适配新包的API（新包的文档都很详细，迁移成本不高）。

方案二：临时跳过peer依赖检查（应急用，不推荐长期使用）

如果你暂时不想替换google-maps-react，可以用npm的参数绕过peer依赖的校验：

• 使用--legacy-peer-deps参数（推荐）：这个参数会让npm回到v6版本的依赖解析逻辑，忽略peer依赖的冲突，不会破坏现有依赖：

  npm install react-router-dom --legacy-peer-deps
  

• 或者使用--force参数，但官方不推荐，因为它会强制安装可能存在兼容性问题的依赖组合，你之前看到的npm WARN using --force Recommended protections disabled就是这个参数的安全警告。

方案三：降级React到16版本（仅特殊场景使用）

如果你一定要保留google-maps-react，可以把React降级到它支持的最高版本（React 16.14.0）：

npm install react@^16.14.0 react-dom@^16.14.0

然后再安装react-router-dom：

npm install react-router-dom

⚠️ 注意：这样做会让你无法使用React 18的新特性，所以只适合不需要React 18功能的旧项目。

备注：内容来源于stack exchange，提问作者Darsh Pawar