Как мне загрузить файл JavaScript с помощью hook-типа response-router-dom и React?

Question

Когда страница загружается, вызывается скрипт, и страница отображается правильно. Когда я переключаю маршруты страниц с помощьюact-router, javascript не запускается повторно, поэтому я получаю пустой div. Вот мой код:

import React, { useEffect } from "react";

const ServiceCard = props => {

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://assets.ubuntu.com/v1/juju-cards-v1.7.2.js";
    document.body.appendChild(script);
  }, [props]);

  return (
    <div className={classes.card}>
      <div>
        <h4 className={classes.headerTitle}>{props.title}</h4>
        <p className={classes.headerDescription}>{props.description}</p>
      </div>
      <div>
        <div
          className="juju-card"
          data-id="~omnivector/bundle/elasticsearch-non-uniform-2"
          data-dd
        ></div>
      </div>
    </div>
  );
};

export default ServiceCard;

Я нашел решение, используя компоненты на основе классов, но я старался избегать их в этом проекте. Заранее спасибо!

Answer 1

Возможно, ваш реквизит не меняется при смене маршрута. Вы должны обернуть свой компонент с withRouter() HOF и использовать props.location.pathname вместо props, чтобы проверить изменения маршрута в вашем useEffect хуке.

Answer 2

Я вижу, что этот код должен работать только в первый раз, так как в следующий раз ваши реквизиты не будут меняться, и ловушка useEffect не будет работать. Вы можете попробовать удалить реквизиты из зависимости и просто использовать []. И убедитесь, что скрипт не внедряется каждый раз.

Если это не сработает, вы должны использовать dymani c import для ресурсов, основанных на обещаниях.