Question

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

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

Gotten行为：直接转到帮助路线/组件会加载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>
);

Answer 1

因为这对您有所帮助，我想我会把它作为答案。

根据单页面应用程序的性质，将在加载React应用程序时加载组件。由于您的zendeskWidget常量是在生命周期挂钩之外定义的，因此它将在加载组件时加载脚本。如果您不希望出现这种情况，则必须将脚本加载移动到生命周期挂钩中的某个位置。

仅在主页上加载的脚本出现在其他路径上

1 个答案: