Скрипт, загруженный только на домашней странице, появляется на других маршрутах - PullRequest
0 голосов
/ 29 ноября 2018

Я использую 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>
);

1 Ответ

0 голосов
/ 30 ноября 2018

Поскольку это помогло вам, я полагаю, что это будет ответом.

Он будет загружать компонент при загрузке приложения реакции по природе одностраничных приложений.Поскольку ваш констант zendeskWidget определен вне хуков жизненного цикла, он загрузит скрипт при загрузке компонента.Если вы не хотите такого поведения, вам придется куда-то переместить загрузку скрипта в ловушки жизненного цикла.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...