React组件移至app文件夹外报错：You should not use <Link> outside a <Router>

架构老林

2026-9-30

报错原因

核心原因是存在两个不同的react-router-dom依赖实例：你的app文件夹下有独立的package.json，属于独立的项目单元，自身已经在app/node_modules中安装了react-router-dom。当你把Button、Home组件移动到app目录外的js/components时，这些组件导入Link时会优先从上层目录的node_modules查找react-router-dom，和App.js中导入BrowserRouter使用的app/node_modules下的react-router-dom不属于同一个实例。
React的Context能力和依赖实例强绑定，不同实例的Context完全隔离，你用实例A的BrowserRouter提供路由上下文，实例B的Link无法读取到对应的上下文，就会抛出You should not use <Link> outside a <Router>的错误。
组件移回app目录后，所有组件导入的都是同一个app/node_modules下的react-router-dom，上下文可以正常传递，报错自然消失。

解决方法

统一打包依赖来源
调整app的打包工具配置，把外部公共组件目录也纳入app的编译范围，让打包时统一使用app下的react-router-dom依赖处理所有组件代码，不会加载额外的依赖实例。以webpack配置为例，修改规则如下：

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
          // 新增外部公共组件的目录路径
          path.resolve(__dirname, '../../components')
        ],
        use: ['babel-loader']
      }
    ]
  }
}

如果使用vite作为打包工具，在vite.config.js中添加server.fs.allow规则允许访问上层组件目录即可。

公共组件做独立依赖封装（适合多项目复用场景）
把js/components目录封装为独立的npm包，在包的package.json中将react、react-router-dom这类公共依赖声明为peerDependencies，不要将这类依赖打包到组件包中，安装时会统一使用宿主项目（也就是你的app）的对应依赖，从根源避免多实例问题。
调整项目结构
如果没有多项目复用组件的需求，直接把公共组件目录放在app的src目录下即可，不需要额外做配置修改。

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