Как заставить реагирующий маршрутизатор заменить компонент только после асинхронной загрузки соответствующего маршрута?

Question

Так вот ситуация - когда Link по щелчку запускается панель nprogress, и я хочу, чтобы реагирующий маршрутизатор заменил текущий компонент только соответствующим маршрутом, как только будет завершена загрузка асинхронно... как в Instagram...

Но я только получаю это -

Вот мой HOC для асинхронной загрузки компонента -

import React, { useEffect, useState } from "react";
import nprogress from "nprogress";
import "nprogress/nprogress.css";

export default importComponent => props => {
  const [loadedComponent, setComponent] = useState(null);

  // this works like componentwillMount
  if (!nprogress.isStarted()) nprogress.start();

  if (loadedComponent) nprogress.done();

  useEffect(() => {
    let mounted = true;

    mounted &&
      importComponent().then(
        ({ default: C }) => mounted && setComponent(<C {...props} />)
      );

    // componentUnMount
    return () => (mounted = false);
  }, []);

  // return the loaded component
  const Component = loadedComponent || <div style={{ flexGrow: 1 }}>..</div>;
  return Component;
};

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

Answer 1

Редактировать: 15 ноября 2021 г.

Старый подход не работает с маршрутами, которые используют параметры маршрута или запросы, такие как useLocation, useRouteMatch и т. д.

Тот, который я использую сейчас, — это использование React.lazy, React.Suspense и обновление резервной опоры при каждом отображении страницы. Поэтому, когда загружается следующая страница, будет показан резервный вариант, который в основном представляет собой тот же экземпляр компонента, что и текущая страница. Более того, благодаря этому новому подходу вы можете отображать следующую страницу в любое время; после извлечения данных из бэкенда или после анимации и т. д.

Вот демо и исходный код .