React Router v6中useNavigate在Router上下文仍报错求助

你遇到的这个错误，核心原因是两个项目各自安装了独立的react-router-dom包，导致@dummyInc/components里的useNavigate Hook，和@dummyInc/site里BrowserRouter提供的上下文不属于同一个模块实例，所以组件无法识别到Router上下文。

1. 统一依赖版本，使用peerDependencies #

修改@dummyInc/components项目的package.json，将react-router-dom从dependencies移到peerDependencies，确保它复用宿主项目（@dummyInc/site）的依赖：

{
  "peerDependencies": {
    "react-router-dom": "^6.0.0"
  }
}

然后删除@dummyInc/components项目的node_modules目录，重新安装依赖（此时不会再单独安装react-router-dom，而是使用宿主项目的版本）。

2. 确保构建工具共享同一模块实例 #

如果你们使用Webpack、Vite等构建工具，需要配置让两个项目共享同一个react和react-router-dom的模块：

• Webpack：在@dummyInc/components的webpack配置里添加别名：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    resolve: {
      alias: {
        'react': path.resolve(__dirname, '../site/node_modules/react'),
        'react-router-dom': path.resolve(__dirname, '../site/node_modules/react-router-dom')
      }
    }
  };
  

• Vite：在@dummyInc/components的vite.config.js里配置resolve.alias：

  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    resolve: {
      alias: {
        'react': path.resolve(__dirname, '../site/node_modules/react'),
        'react-router-dom': path.resolve(__dirname, '../site/node_modules/react-router-dom')
      }
    }
  });
  

3. 验证依赖唯一性 #

执行以下命令检查两个项目的依赖树，确认react-router-dom只有一个版本：

# 在@dummyInc/site项目根目录执行
npm ls react-router-dom

如果输出里出现多个版本，说明还有重复依赖，需要清理或调整依赖配置。

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