仅在主页上加载的脚本出现在其他路由上答案

【问题标题】：Script loaded only on home page appears on other routes仅在主页上加载的脚本出现在其他路由上
【发布时间】：2018-11-29 20:51:56
【问题描述】：

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

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

得到的行为：直接转到帮助路径/组件会加载 Zendesk WebWidget。

这里有一些示例代码：

路线：

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

首页：

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>
);

【问题讨论】：

由于单页应用的性质，它会在你加载 react 应用时加载组件。由于您的 zendeskWidget 常量是在生命周期挂钩之外定义的，因此它会在加载组件时加载脚本。如果你不想要这种行为，你将不得不将脚本加载移动到某个地方的生命周期钩子中。
完美运行，非常感谢！

标签： javascript reactjs react-router

【解决方案1】：

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

由于单页应用程序的性质，它会在您加载 React 应用程序时加载组件。由于您的 zendeskWidget 常量是在生命周期挂钩之外定义的，因此它会在加载组件时加载脚本。如果您不希望这种行为，您将不得不将脚本加载移动到某个地方的生命周期挂钩中。

【讨论】：

正要请您将其发布为答案，再次感谢！