错误：useRoutes() 只能在 <Router> 组件的上下文中使用答案

【问题标题】：Error: useRoutes() may be used only in the context of a <Router> component错误：useRoutes() 只能在 <Router> 组件的上下文中使用
【发布时间】：2021-01-31 19:57:13
【问题描述】：

我正在使用 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

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

将<App /> 包裹在<Router> </Router> 内将解决问题。

import { BrowserRouter as Router } from "react-router-dom";

<Router>
 <App/>
</Router>

【讨论】：

【解决方案2】：

问题是由于模块包中有react-router-dom lib。
加载动态模块时，它使用的是自己的 lib 版本，而不是宿主应用程序提供的版本。

我将这个添加到我的 webpack/rollup 配置中的externals，问题就解决了。

我现在可以在主机应用程序中通过插件管理子路由！ =]。

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

【讨论】：