[英]Error: useRoutes() may be used only in the context of a <Router> component
I'm adding React modules dynamically using System JS, and it works great!我正在使用 System JS 动态添加 React 模块,并且效果很好!
Except if I try to use the react-router context from the loaded module.除非我尝试使用加载模块中的 react-router 上下文。
"react-router-dom": "6.0.0-beta.0" "react-router-dom": "6.0.0-beta.0"
You can see in the react component explorer that there is definitely a <Router>
component as an ancestor.在react组件浏览器中可以看到肯定有一个
<Router>
组件作为祖先。
The routing works fine in the host application - it only breaks when called from a dynamically loaded component.路由在主机应用程序中工作正常 - 只有在从动态加载的组件调用时才会中断。
I'm a novice with React, so I could be making a wrong assumption of how the contexts are provided to deeply nested or dynamically loaded children.我是 React 的新手,所以我可能对如何将上下文提供给深度嵌套或动态加载的子项做出错误的假设。
Router is mounted here -路由器安装在这里 -
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/index.tsx#L204
Module is being loaded here -模块正在这里加载 -
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/frontend/apps/webapp/src/features/plugins/AppRootPage.tsx#L84
The module element that throws the exception is here -引发异常的模块元素在这里 -
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/backend/modules/forms/src/plugin/FormsRootPage.tsx#L47 https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/backend/modules/forms/src/plugin/FormsRootPage.tsx#L47
The problem was due to having the react-router-dom
lib in the module bundle.问题是由于模块包中有
react-router-dom
库。
When the dynamic module loaded, it was using it's own version of the lib, rather then the one provided by the host application.加载动态模块时,它使用的是自己的 lib 版本,而不是主机应用程序提供的版本。
I added this to the externals
in my webpack/rollup config, and the problem was solved.我将此添加到我的 webpack/rollup 配置中的
externals
,问题解决了。
I can now have children routes managed by a plugin inside a host application!我现在可以通过主机应用程序中的插件管理子路由! =].
=]。
Webpack -网络包 -
https://github.com/savantly-net/sprout-platform/blob/e746085ebd65820fd449c968385913f2cc86ee0d/frontend/tools/sprout-toolkit/src/config/webpack.plugin.config.ts#L176 https://github.com/savantly-net/sprout-platform/blob/e746085ebd65820fd449c968385913f2cc86ee0d/frontend/tools/sprout-toolkit/src/config/webpack.plugin.config.ts#L176
Wrapping <App />
inside <Router> </Router>
will resolve the issue.将
<App />
包裹在<Router> </Router>
将解决该问题。
import { BrowserRouter as Router } from "react-router-dom";
<Router>
<App/>
</Router>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.