我在一些url上部署了两个react应用程序作为页眉和页脚标头-'someurl/header'页脚-'someurl/footer'我想将其集成到第三个应用程序中我可以一次集成其中一个，并且两个react应用程序都已正确加载，但当我将它们集成在一起时，只有第一个应用程序正确加载，第二个应用程序也渲染，但不是作为react组件这是我的代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>.
</script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<script async>
fetch('http://url/footer')
.then((response) => response.text())
.then(data => {
const node = document.createRange().createContextualFragment(data);
document.getElementById("footer-container").appendChild(node);
});
</script>
<script defer >
fetch('http://url/header')
.then((response) => response.text())
.then(data => {
const node = document.createRange().createContextualFragment(data);
document.getElementById("header-container").appendChild(node)
});
</script>
<div id="header-container"></div>
<div id="outer_div">outer content</div>
<div id="footer-container"></div>
感谢任何帮助或提示提前
在苦苦挣扎后，我找到了解决方案，详细解释了
不幸的是，不可能在同一个文档上运行多个create-react应用程序，因为create-rect应用程序项目产生的JavaScript捆绑包并非没有副作用：捆绑的WebPack运行时在全局范围内写入一个对象，从而阻止加载多个这样的捆绑包。
不知何故，加载第二个React应用程序的脚本会产生副作用，并阻止第一个React程序的引导！
事实证明，WebPack运行时是这里的问题。WebPack运行时将一个对象添加到全局作用域，用于延迟加载块。此对象的默认名称是webpackJsonp
解决方案webpackJsonp对象的名称可以在WebPack配置中进行配置。
// webpack.config.dev.json
...
output: {
...
jsonpFunction: 'jsonpApp2'
}
我从这里找到了解决方案https://medium.jonasbandi.net/hosting-multiple-react-applications-on-the-same-document-c887df1a1fcd
注意：jsonpFunction在webpack 5中不可用，这里是webpack 5-output.jsonpFunction -> output.chunkLoadingGlobal中的替代方案看看这个
module.exports = {
//...
output: {
//...
chunkLoadingGlobal: 'myCustomFunc',
},
};