Отобразить существующий компонент (ref) как маршрут

Question

Задача

Наше приложение внедряет другие приложения, которые отображаются с помощью Iframes, пользователь может получить доступ к этим приложениям через меню вкладок. Очевидно, что запрос iframe src может занять некоторое время, и он не идеален для выполнения запроса, когда пользователь нажимает на вкладку.

Приложение должно выглядеть так, как будто оно является частью нашего приложения, т. Е. Полностью бесшовным и частью нашего пакета.

---

Что я пробовал - Кэширование браузера

Простым вызовом URL-адреса IFrame при загрузке приложения браузер будет кэшировать большинство необходимых ресурсов для каждого приложения.

Для этого я создал простой компонент, который отображает IFrame с нужным URL-адресом приложения.

const PreloadIframe = props =>
  (
      <iframe
        src={props.url}
      ></iframe>
  );

Затем я отображаю этот компонент как display: none при загрузке приложения. И когда пользователь нажимает на нужную вкладку для загрузки iframe real , пакет уже был кэширован, и переход выглядит так: почти Кажется,

Проблемы с этим решением

• Клиент делает 2 запроса на URL приложения, один раз в кэш и еще раз, когда он действительно должен отображаться

Это отменяет любую оптимизацию, которую может обеспечить кэширование, поскольку пользователь все еще должен ждать ответа от веб-службы, прежде чем он сможет использовать внедренное приложение.

---

В идеале

Я хотел бы установить для компонента <PreloadIframe/> значение visible , когда пользователь нажимает соответствующую вкладку.

Можно ли использовать Route.render () или Route.component

Чтобы отобразить существующий компонент, т. Е. Компонент, который в данный момент присутствует в DOM?

Answer 1

Я просто создал промежуточный компонент IframeFactory

class IframeFactory extends Component {

  componentDidMount() {
    this.props.iframeRef.current.setVisible(true);
  }
  componentWillUnmount() {
    this.props.iframeRef.current.setVisible(false);
  }
  render() {
    return null;
  }

Этот компонент принимает ссылку на iframe.

Затем в моем <Route /> компоненте я просто визуализирую этот промежуточный компонент и передаю соответствующую ссылку.

{injectableApps ? injectableApps.map(app => (
        <Route
          key={`/${app.id}`}
          path={`/${app.name}`}
          render={() => (
            <IframeFactory iframeRef={app.iframeRef} />
          )}
        />
      )) : null}