为什么在盖茨比项目中，javascript不在页面更改时启动？

我有一个trustpilot小部件，它在初始加载时呈现良好。然后，当我更改页面时，trustpilot小部件返回默认徽标，没有显示任何数据

我尝试在componentDidMount中删除外部trustpilot js，然后将其添加回，以尝试刷新，但没有成功

$('#trustpilot').after('<div class="trustpilot-widget trustpilot-carousel" data-locale="...

我想我可以再次手动添加trustpilot html。盖茨比有没有办法做到这一点？这行得通吗？下面的代码不起作用

$('#trustpilot').after('<div class="trustpilot-widget trustpilot-carousel" data-locale="...

---

$（“#trustpilot”）。在（“之后，因为您在基于React的项目中添加jQuery选择器（直接指向DOM），混合了不同的内容和逻辑。使用React时，您创建和操作虚拟DOM（vDOM），它由React按需添加

更改页面时，您请求的
可能尚未呈现，或者您的代码更改未被持久化（装载/卸载和重新水化问题）

我想我可以再次手动添加trustpilot html。有吗
在盖茨比有这样的方法吗

您可以使用
gatsby browser.js
和
gatsby ssr.js
API，特别是/。这两种API都将包装您的代码（在两个文件中都使用），并避免在页面中卸载组件，从而持久保存您的Truspilot小部件

const React = require("react")
const Layout = require("./src/components/layout").default

exports.wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

const React=require（“React”）
const Layout=require（“./src/components/Layout”）。默认值
exports.wrapPageElement=（{element，props}）=>{
返回{element}
}

关于到目前为止您所评论的内容，可能符合您添加脚本的要求，但这不会节省您在每次路由更改时卸载组件的时间