我有以下组件树:
<BrowserRouter>
<Suspense fallback={<h1>MyFallback</h1>}>
<Switch>
<Route component={HomePage} path="/" exact />
<Route
component={lazy(() => import('./pages/Auth/Login'))}
path="/auth/login"
exact
/>
</Switch>
</Suspense>
</BrowserRouter>
我正在使用React.Suspense
来显示加载回退。但是,现在我想在当前页面的顶部显示进度条,而不是使用常规的Suspense加载后备广告,该操作会删除整个当前路线以显示后备广告。
例如,如何添加NProgress来指示正在加载的页面的加载进度?
答案 0 :(得分:2)
这是解决方案
const LazyLoad = () => {
useEffect(() => {
NProgress.start();
return () => {
NProgress.stop();
};
});
return '';
};
<Suspense fallback={<LazyLoad />}>
答案 1 :(得分:1)
import { useEffect } from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
export default function TopProgressBar() {
useEffect(() => {
NProgress.configure({ showSpinner: false });
NProgress.start();
return () => {
NProgress.done();
};
});
return "";
}
答案 2 :(得分:0)
这是我使用react hook的解决方案。
import React, { useEffect } from 'react';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
const Loading = () => {
useEffect(() => {
NProgress.start();
return () => {
NProgress.done();
};
}, []);
return (
<Row>
<Col span={12} offset={6}>
Loading
</Col>
</Row>
);
};
export default Loading;
如您所见,我使用useEffect
来检测组件状态。
NProgress.start();
在组件安装时被调用NProgress.done();
在组件卸下时被称为清理。返回值是可选的,您可以呈现所需的任何内容。
您还可以使用基于类的组件来实现相同的结果。为此,您可以使用componentWillUnmount()
和componentDidMount()
。