Ecwid 使用 React Router 存储在 React 中

Question

我正在努力解决一个让我发疯的问题。

我有一个 Ecwid 商店，并且有一种方法可以使用一些脚本在您自己的网站中实现该商店，我正在制作的这个网站是在 React 中我在 Reddit 上找到了一个解决方案（https://www.reddit.com /r/reactjs/comments/fwaam2/running_scripts_in_jsx_and_functions_defined_by/fuxbqr1/) 将外部脚本集成到我的 React 组件中并且它可以工作，但是后来我在网站上实现了 React-Router ，我遇到了另一个问题：商店页面加载了第一次加载整个网站，但当我浏览网站然后返回商店时，它不再加载，我在 StackOverflow 上搜索类似的问题，但所有答案都不适合我。

我得出的结论是，脚本有问题，无法多次加载，直到我刷新整个网站，如果有人在反应中遇到 Ecwid 集成问题或类似问题，我会附上整个商店组件的代码并找到一种方法使其发挥作用，请帮忙：D

import {useEffect, useRef} from 'react';

function Products() {

const storeDiv = useRef(null);
const scriptRef = useRef(null);

window.localStorage.setItem("show_ecwid_logs","true")
window.ecwid_script_defer = true;
window.ecwid_dynamic_widgets = true;
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.enable_catalog_on_one_page = true;
window._xnext_initialization_scripts = [{
  widgetType: 'ProductBrowser',
  id: 'my-store-51363006',
  arg: ["id=productBrowser", "views=grid(20,3)"]  },
  {
    widgetType: 'CategoriesV2',
    id: 'my-categories-51363006',
    arg: ["id=categoriesV2"]
  }
  ,
  {
    widgetType: 'SearchWidget',
    id: 'my-search-51363006',
    arg: ["id=searchWidget"]
  }
];



let script = document.createElement('script');
script.type = 'text/javascript';
script.src = ('https://app.ecwid.com/script.js?51363006&data_platform=code&data_date=2021- 
03-10');
script.defer = true;
script.ref=scriptRef;

useEffect(() => {
if(!scriptRef.current){
  storeDiv.current.appendChild(script);
   }
});

return (
  <div className="store">
        <div id="my-search-51363006"></div>
        <div id="my-categories-51363006"></div>
        <div id="my-store-51363006" ref={storeDiv}></div>
        <div className="ec-cart-widget"></div>
  </div>

  );
}

export default Products;

Answer 1

我遇到了同样的问题，我也无法解决这个问题。我认为我将避免使用反应路由器以避免遇到这个问题。我一直在寻找任何资源来帮助解决这个问题，但这似乎是一个非常小众的问题，只有少数人经历过。