我有一个由React应用程序和React组件库组成的项目。 （两者都是我自己的代码）。该应用程序和库是两个单独的程序包，具有各自的package.json和基于webpack的构建系统。该应用程序会导入该库并使用其中的React组件。
应用程序和库都使用react-router。当我从应用程序中的lib中安装使用react-router的组件时遇到问题。我收到错误消息“错误：不变式失败：您不应该在<Route>外使用<Router>”
但是<Route>组件实际上包含在<Router>组件中。
我认为问题在于<Router>是由应用程序渲染的，而<Route>是在lib中渲染的，并且每个实例都使用了react-router上下文的不同实例。
我通过在应用程序和lib中都导入<Route>并使用console.log将Route组件输出到控制台来测试了这一理论。
当我检查两个日志时，我发现每个记录的Route是一个不同的实例。即从应用程序路由！==从lib路由，我认为这就是为什么react-router抱怨的原因。
如何配置webpack以确保应用程序和库都使用相同的react-router实例？
答案 0 :(得分：1)
因此，您具有以下结构：
app/
...
node_modules/
lib/
...
node_modules/
您的app从Route导入app/node_modules，而您的lib从Route导入app/node_modules/lib/mode_modules。这使得这两个Route实例不会共享相同的上下文。
您希望使app和lib从同一node_modules目录中导入路由器相关的依赖项。
一种解决方案是在导入app和app/node_modules/lib/node_modules时，使app/node_modules而不是Route出现在Router上。
您可以通过使用resolve-modules将node_modules/lib/node_modules放在node_modules的webpack配置的modules部分的app中的modules: [
path.resolve(__dirname, 'node_modules/lib/node_modules'),
'node_modules'
]
之前来完成此操作：
Checkbox答案 1 :(得分：0)
该问题是由doppleganger dependencies引起的。 blog post描述了该问题和解决方案，该解决方案是在webpack中为通用模块指向主node_modules文件夹设置别名。