引入封装react-router-dom组件的库报NavLink不在Router内错误如何解决

• 这个错误和React版本不一致没有直接关联，核心诱因是存在多份独立的react-router-dom副本：
  • 即使你的组件库和主项目的react-router-dom版本号完全相同，只要两者分别安装了独立的副本，各自导出的Router上下文、NavLink组件就是完全隔离的。
  • 主项目里的BrowserRouter是主项目侧react-router-dom导出的，只会注入对应副本的上下文实例；而组件库内使用的NavLink来自组件库自己的react-router-dom副本，只能识别同一份副本的Router上下文，因此会判定自己没有被Router包裹，抛出对应错误。
  • 如果组件库打包时没有将react-router-dom标记为外部依赖，直接把react-router-dom打包进了组件库产物，会进一步加剧这个问题。

• 组件库侧配置调整：
  1. 在package.json中把react、react-dom、react-router-dom从dependencies移到peerDependencies中，明确要求使用方提供这些依赖，避免安装组件库时自动拉取独立的依赖副本。
  2. 调整组件库打包配置，将react、react-dom、react-router-dom标记为external，不要将这些依赖打包进组件库的最终产物，强制复用主项目提供的依赖。
• 主项目侧验证修复：
  执行包管理工具的列表命令检查react-router-dom的副本数量：npm用npm ls react-router-dom，yarn用yarn list react-router-dom，pnpm用pnpm list react-router-dom。如果仍存在多份副本，可以在package.json中添加resolutions（yarn/pnpm）或overrides（npm）配置，强制整个项目所有依赖都使用同一份react-router-dom副本。

React版本不一致不会触发当前的Router上下文错误，但可能带来其他运行时问题（比如Hook调用异常），建议尽量对齐组件库和主项目的React大版本，避免隐藏风险。

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