在squarespace站点中嵌入react应用

Question

我正在尝试将一个小的react应用程序嵌入到squarespace网站。

页面如下:https://www.birdiebreak.com/referral-profile?referralCode=WHUOS

我可以得到react应用程序加载只是很好，但网站的各个部分消失!特别是页眉和页面上的任何图像。

我试过使用代码小部件以及嵌入小部件，两者都有相同的结果。我确实尝试了一个基本的Create React App网站，看看我构建的最小代码是否有问题，但还是遇到了同样的问题。

有人成功地做到了吗?

Answer 1

我不知道为什么，但是如果我添加一个script标签到引用我的react应用程序<script src="path-to-react/main.buildcode.js" />部分的squarespace网站只是停止加载。

然而，如果我添加一个脚本加载器，事情就会正常工作。

<script type="text/javascript">
(function (g, r, head, script) {
head = r.getElementsByTagName("head")[0]; 
script = r.createElement("script"); 
script.async = 1; 
script.src = "https://birdie-break-develop.azurewebsites.net/static/js/main.d2ee648d.js";            

head.appendChild(script);
})(window, document);
</script>

Answer 2

我已经成功地使用了React文档中添加React到网站指南的修改版本。假设你可以访问React应用程序的源代码，下面的步骤应该可以工作:

1. 添加一个代码块，其中包含一个唯一的ID ('custom-react-root'，或任何你想要的)。这是你的React应用渲染的地方。
2. 配置你的index.js使用这个块作为根:

   function run() {
   ReactDOM.render(
   <React.StrictMode>
   <App />
   </React.StrictMode>,
   document.getElementById('custom-react-root')
   );
   } 
   

3. 为构建工具运行build命令来创建最小化的JS文件。(如yarn build)
4. 在<script>标签中包装压缩JS文件，在<style>标签中包装CSS文件。为此，我编写了一个bash脚本，其中包括以下几行:

   (
   echo "<script>"
   cat build/static/js/2.*.chunk.js
   echo "</script>"
   echo "<script>"
   cat build/static/js/main.*.chunk.js
   echo "</script>"
   echo "<script>"
   cat build/static/js/runtime-main.*.js
   echo "</script>"
   echo "<style>"
   cat build/static/css/*.chunk.css
   echo "</style>"
   ) > build/injectable.html
   

5. 按照SquareSpace文档中的描述，将这些标签粘贴到Page Header中。