仅在匹配的路由异步加载后，如何使React Router替换组件？

Question

这就是这种情况-当单击Link时，nprogress栏将启动，我希望react-router仅在异步加载完成后才用匹配的路由替换当前组件。就像在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;
};

我在Internet上的任何地方都找不到解决方案。.所以我在这里用stackoverflow问这个问题。我希望这里有人可以解决这个问题。

Answer 1

我今天遇到了同样的问题。我必须跟踪上一页组件并在加载下一页时返回它。如下图，

if(!loadedComponent) return prevPage;
prevPage = loadedComponent;
return loadedComponent;

我只是在组件外声明了 prevPage，因为使用 useState 会导致无限渲染。但我认为可能有一种存储 prevPage 的反应式方法。这是一个示例 gist。