错误：useRoutes（）只能在<Router>组件的上下文中使用

Question

我正在使用System JS动态添加React模块，效果很好！
除非我尝试使用已加载模块中的react-router上下文。

“ react-router-dom”：“ 6.0.0-beta.0”

您可以在react组件浏览器中看到肯定有<Router>组件作为祖先。
路由在主机应用程序中运行良好-仅在从动态加载的组件中调用时才会中断。

我是React的新手，因此我可能对如何将上下文提供给深度嵌套或动态加载的子级做出错误的假设。

路由器安装在这里-
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/frontend/apps/webapp/src/index.tsx#L204

模块正在此处加载-
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/frontend/apps/webapp/src/features/plugins/AppRootPage.tsx#L84

引发异常的模块元素在这里-
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/backend/modules/forms/src/plugin/FormsRootPage.tsx#L47

Answer 1

问题是由于模块捆绑包中包含import mysql from 'mysql2/promise'; lib。
加载动态模块时，它使用的是它自己的lib版本，而不是宿主应用程序提供的版本。

我将此添加到了webpack / rollup配置的react-router-dom中，问题已解决。

我现在可以让子路由由主机应用程序内的插件管理！ =]。

Webpack-
https://github.com/savantly-net/sprout-platform/blob/e746085ebd65820fd449c968385913f2cc86ee0d/frontend/tools/sprout-toolkit/src/config/webpack.plugin.config.ts#L176