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

Question

So here's the situation - When a Link is clicked the nprogress bar will start and I want react-router to only replace the current component with the matched route once that's done loading asynchronously.. just like in instagram..

But I am only getting this -

Here's my HOC to load component asynchronously --

 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; };

I didn't find a solution to this anywhere on the internet.. so I am asking this question here in stackoverflow. I am hoping someone here can solve this.

Answer 1

I was having the same problem today. I had to keep track of the previous page component and return it while loading the next page. As below,

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

I just declared prevPage outside the component because using useState caused infinite rendering. But I think there might be a reactive approach for storing prevPage. Here is an example gist .