我有一个由React应用程序和React组件库组成的项目。 （这两个都是我自己的代码）。应用程序和库是两个独立的包，它们有自己的package.json和基于webpack的构建系统。该应用程序导入库并使用它的React组件。
app和lib都使用react-router。当我从我的应用程序中使用react-router的lib安装组件时遇到问题。我收到错误“错误：不变失败：你不应该在<Route>之外使用<Router>”
然而，<Route>组件实际上包含在<Router>组件中。
我认为问题是<Router>由app呈现，<Route>在lib中呈现，并且每个都使用react-router上下文的不同实例。
我通过在app和lib中导入<Route>并使用console.log将Route组件输出到控制台来测试这个理论。
当我检查两个日志时，我发现每个记录的Route都是一个不同的实例。即从应用程序路由！==从lib路由，我认为这就是react-routing抱怨的原因。
如何配置webpack以确保应用程序和lib都使用相同的react-router实例？
所以，你有以下结构：
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。
你可以通过使用node_modules/lib/node_modules将node_modules放在modules webpack配置的app部分之前的resolve-modules来实现这一点：
modules: [
path.resolve(__dirname, 'node_modules/lib/node_modules'),
'node_modules'
]
问题是由doppleganger dependencies引起的。这个blog post描述了问题和解决方案，即在webpack中设置别名，使公共模块指向主node_modules文件夹。