Disqus 集成在下一个 js 应用程序、下一个链接和下一个脚本中导致问题

Question

我正在尝试将 disqus 集成到我的下一个网站中，但我必须使用链接标签进行导航。我无法在此用例中使用锚标记。 disqus就是通过这段代码实现的，非常简单，我使用disqus通用js脚本制作了disqus组件，并将其渲染在另一个客户端组件中。

在初始加载中一切正常，但主要问题是当我使用链接导航到不同页面时，如果我重新输入并且组件根本不加载，disqus 部分就会消失。控制台没有错误。

当我从浏览器中硬刷新时，该组件再次出现。我怀疑罪魁祸首是下一个链接标签和下一个脚本标签。这个问题困扰我很久了

import React from "react";
import Script from "next/script";

const Javascriptmenu = () => {
    return ( <> 
       <div id="disqus_thread"></div>
       <Script id="chapter" >
       { 
           `
              var disqus_config = function () {
                 this.page.url = document.location.href;  // Replace PAGE_URL with your page's canonical URL variable
                 this.page.identifier = document.location.href.split(".online")[1]; // Replace    PAGE_IDENTIFIER with your page's unique identifier variable
              };
              (function() { // DON'T EDIT BELOW THIS LINE
                  var d = document, s = d.createElement('script');
                  s.src = 'https://yoururlhere.disqus.com/embed.js';
                  s.setAttribute('data-timestamp', +new Date());
                  (d.head || d.body).appendChild(s);
              })();
    `}
</Script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
 </>
);
}

Answer 1

我已经使用此代码解决了这个问题。这是由于 Next Link 标签和 Next 脚本不能很好地协同工作造成的。该脚本没有被加载两次，因为它已经保存在缓存中。只要您不硬刷新，脚本就不会重新加载。下面的代码解决了这个问题，并将在每个链接标签单击时加载脚本。

    const Javascriptmenu: React.FC<JavascriptProps> = ( {
     id
    }) => {

    const javascriptMenuRef = useRef<HTMLDivElement>(null)

    const script = 
    `
    
    <script id={${id}>
    { 
    
     var disqus_config = function () {
     this.page.url = document.location.href;  // Replace PAGE_URL with 
     your page's canonical URL variable
     this.page.identifier = ${id}; // Replace PAGE_IDENTIFIER with your 
     page's unique identifier variable
 
     };
     (function() { // DON'T EDIT BELOW THIS LINE
     var d = document, s = d.createElement('script');
     s.src = 'https://Yoururlhere.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
     })();
     
     
     }
 </script>
 `

 useEffect(() => {
    /* Clear out the loaded script's on component's un-mount */
    return () => {
        document.getElementById(`${id}`)?.remove()
        document.getElementById('s_load_loader')?.remove()
        document.getElementById(`${id}-s15dasboard`)?.remove()
        document.getElementById(`${id}-universal`)?.remove()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

useEffect(() => {
    if (id) {
        // creates a document range (grouping of nodes in the document). In this case, we instantiate it as empty, on purpose
        const range = document.createRange()
        // creates a mini-document (lightweight version), in our range with our script in it
        const documentFragment = range.createContextualFragment(script)
        // appends it on the same level of annex div - so that it renders in the correct location
        javascriptMenuRef.current?.appendChild(documentFragment)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [id])
 
    return ( 
       <> 
       <div id="disqus_thread"></div>
       <div ref={javascriptMenuRef}>
       <div id={ `${id}-s15dasboard` }/>
       </div>

       <noscript>Please enable JavaScript to view the <a 
       href="https://disqus.com/?ref_noscript">comments powered by 
       Disqus.</a>
       </noscript>
       </>

     );
  }
 
export default Javascriptmenu;

如果您遇到同样的问题，希望这会有所帮助