Javascript 仅在主页上加载的脚本将显示在其他路由上

我使用的是Zendesk Webwidget，如果我先在浏览器上加载这些页面，那么我添加并显示在主页上的脚本似乎也会加载到其他页面上

预期行为：直接转到帮助路由/组件不应加载Zendesk WebWidget脚本，直到路由到主页

获取行为：直接转到帮助路径/组件加载Zendesk WebWidget

下面是一些示例代码：

路线：

const AppRoutes = () => (
  <AppContainer>
   <Switch>
    <Route exact path="/help" component={Help} />
    <Route exact path="/" component={Home} />
   </Switch>
  </AppContainer>
);

const AppRoutes=（）=>(
);

主页：

const zendeskWidget=新承诺（（解决、拒绝）=>{
const script=document.createElement（'script'）；
script.src=https://myzendeskscript.com';
setAttribute（'id'，'ze snippet'）；
script.async=true；
script.addEventListener（'load'，function（）{
解决（）；
});
script.addEventListener（'error'，函数（e）{
拒绝（e）；
});
document.body.appendChild（脚本）；
});
类Home扩展了React.Component{
componentDidMount（）{
zendeskWidget。然后（（）=>{
//返回主页时显示小部件的代码
if（zE&&zE.show）{
zE.show（）；
}
});
}
组件将卸载（）{
zendeskWidget。然后（（）=>{
//离开主页时隐藏小部件的代码
if（zE&&zE.hide）{
zE.hide（）；
}
});
}
render（）{
返回(
);
}
};

帮助：

const Help=（）=>(
一些文本
);

既然这对你有帮助，我想我会把它作为一个答案

---

它将在加载react应用程序时加载组件，这是单页应用程序的特性。由于zendeskWidget常量是在生命周期挂钩之外定义的，因此它将在加载组件时加载脚本。如果不希望出现这种行为，则必须将脚本加载移到某个生命周期挂钩中。

加载react应用程序时，它将加载组件，这是单页应用程序的性质。由于zendeskWidget常量是在生命周期挂钩之外定义的，因此它将在加载组件时加载脚本。如果您不希望出现这种行为，您将不得不将脚本加载移动到某个生命周期挂钩中。工作非常好，非常感谢！我正要请你把它作为答案发布，再次感谢！

const zendeskWidget = new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = 'https://myzendeskscript.com';
  script.setAttribute('id', 'ze-snippet');
  script.async = true;
  script.addEventListener('load', function () {
    resolve();
  });
  script.addEventListener('error', function (e) {
    reject(e);
  });
  document.body.appendChild(script);
});

class Home extends React.Component {
  componentDidMount() {
    zendeskWidget.then(() => {
      // code to show the widget when coming back to the home page
      if(zE && zE.show) {
        zE.show();
      }
    });
  }

  componentWillUnmount() {
    zendeskWidget.then(() => {
      // code to hide the widget when leaving home page
      if(zE && zE.hide) {
        zE.hide();
      }
    });
  }
  render() {
    return (
      <HomeContainer />
    );
  }
};

const Help = () => (
  <HelpContainer>
    Some Text
  </HelpContainer>
);