如何集成 flutter web build inside react app for specific route？
[英]How to integrate flutter web build inside react app for specific route?
问题描述
I have a requirement where i want to run flutter app for specific URL inside react application and for rest of the urls, react app will run.
我有一个要求，我想在反应应用程序中为特定的 URL 运行 flutter 应用程序，对于 rest 的 url，反应应用程序将运行。
I will have flutter build folder and also will use browser's communication channel to pass data but is there any way how i can integrate flutter app inside react app with this page?我将拥有 flutter 构建文件夹，还将使用浏览器的通信通道传递数据，但有什么方法可以将 flutter 应用程序集成到此页面的 React 应用程序中？
3 个解决方案
解决方案1
0 2022-01-27 07:13:51
blog.logrocket.com/flutter-web-app-node-js Please go through this URL. blog.logrocket.com/flutter-web-app-node-js 请通过此 URL go。 (Courtesy: blog.logrocket.com and stackoverflow) （礼貌：blog.logrocket.com 和 stackoverflow）
解决方案2
0 已采纳 2022-02-01 05:36:54
I have found one solution which can help to integrate flutter app build in react app.我找到了一种解决方案，可以帮助将 flutter 应用程序构建到反应应用程序中。 Just put your flutter app build inside /public folder.只需将您的 flutter 应用程序构建放在 /public 文件夹中。 And inside route component's on load event, load that application with below code.在路由组件的加载事件中，使用以下代码加载该应用程序。
function loadMainDartJs() {
var scriptTag = document.createElement('script');
scriptTag.src = './main.dart.js';
scriptTag.type = 'application/javascript';
document.getElementById('flutterPreview').append(scriptTag);
}
loadMainDartJs();
解决方案3
0 2022-11-26 10:58:10
And also in Next.js还有Next.js
all you need is import your script in Head tag in page that you need, for example:您所需要的只是将您的脚本导入到您需要的页面的 Head 标记中，例如：
/pages/index.jsx
export default function Home() {
return (
<div>
<Head>
<script src='/main.dart.js' defer></script>
</Head>
</div>
)
}
and your dart script move to public folder: /public/main.dart.js和你的 dart 脚本移动到公共文件夹： /public/main.dart.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.