錯誤：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

問題是由於模塊包中有react-router-dom庫。
加載動態模塊時，它使用的是自己的 lib 版本，而不是主機應用程序提供的版本。

我將此添加到我的 webpack/rollup 配置中的externals ，問題解決了。

我現在可以通過主機應用程序中的插件管理子路由！ =]。

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

Answer 2

將<App />包裹在<Router> </Router>將解決該問題。

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

<Router>
 <App/>
</Router>