reactjs - 如何仅在匹配的路由异步加载后才使反应路由器替换组件..？

Question

所以情况就是这样 - 当点击 a 时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;
};

我在互联网上的任何地方都没有找到解决方案。所以我在stackoverflow中问了这个问题。我希望这里有人可以解决这个问题。

Answer 1

编辑：2021 年 11 月 15 日

旧方法不适用于使用路由参数或查询的路由，例如 useLocation、useRouteMatch 等。

我现在使用的是使用 React.lazy、React.Suspense 并在呈现页面时更新 fallback 属性。因此，当加载下一页时，将显示与当前页面基本相同的组件实例的后备。此外，通过这种新方法，您可以随时呈现下一页；在从后端获取数据之后，或者在动画之后等。

这是一个演示和源代码。