feat: 路由跳转时添加顶部进度条

Author: NLRX-WJC

src/components/Loading/index.jsx

@@ -1,24 +1,12 @@
-import React, { Component } from "react";
+import React from "react";
 import { Spin } from "antd";
-import NProgress from "nprogress"; // progress bar
-import "nprogress/nprogress.css"; // progress bar style
 
-NProgress.configure({ showSpinner: false })// NProgress Configuration
-
-class Loading extends Component {
-  componentDidMount() {
-    NProgress.start()
-  }
-  componentWillUnmount() {
-    NProgress.done()
-  }
-  render() {
-    return (
-      <div className="app-container">
-        <Spin />
-      </div>
-    );
-  }
-}
+const Loading = () => {
+  return (
+    <div className="app-container">
+      <Spin />
+    </div>
+  );
+};
 
 export default Loading;

src/views/layout/Content/index.jsx

@@ -3,11 +3,15 @@ import { Redirect, withRouter, Route, Switch } from "react-router-dom";
 import DocumentTitle from "react-document-title";
 import { connect } from "react-redux";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
 import { Layout } from "antd";
 import { getMenuItemInMenuListByProperty } from "@/utils";
 import routeList from "@/config/routeMap";
 import menuList from "@/config/menuConfig";
 const { Content } = Layout;
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
 const getPageTitle = (menuList, pathname) => {
   let title = "Ant Design Pro";
@@ -29,7 +33,14 @@ const LayoutContent = (props) => {
     <DocumentTitle title={getPageTitle(menuList, pathname)}>
       <Content style={{ height: "calc(100% - 100px)" }}>
         <TransitionGroup>
-          <CSSTransition key={location.pathname} timeout={500} classNames="fade" exit={false}>
+          <CSSTransition
+            key={location.pathname}
+            timeout={500}
+            classNames="fade"
+            exit={false}
+            onEnter={() => NProgress.start()}
+            onEntered={() => NProgress.done()}
+          >
             <Switch location={location}>
               <Redirect exact from="/" to="/dashboard" />
               {routeList.map((route) => {