代码部分

实现思路，借用antd 的spin组件实现，当然动画也可以自定义，动画持续时间也可以通过子组件的请求时间以redux来控制

import React, { Component } from "react";
import { Route, Switch, withRouter } from "react-router";
import { Spin } from "antd";
import Home from "../pages/Home";
import About from "../pages/About";
import Products from "../pages/Products";
import Solution from "../pages/Solution";
import SolutionDetails from "../pages/SolutionDetails";
import Download from "../pages/Download";
import Details from "../pages/Details";
import Contact from "../pages/Contact";
import ErrorPage from "../pages/Error";

class routers extends Component {
  state = { loading: true };
  timer = null;
  /**
   * 生命周期函数
   */
  // 组件挂载
  componentDidMount() {
    this.loadingShow();
  }
  // 监听props变化
  componentWillReceiveProps(nextProps) {
    //当路由切换时
    if (this.props.location !== nextProps.location) {
      window.scrollTo(0, 0);
      this.loadingShow();
    }
  }

  /**
   * 功能
   */
  // 加载中函数
  loadingShow() {
    this.setState(
      {
        loading: true
      },
      () => {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.setState({ loading: false });
        }, 1000);
      }
    );
  }

  render() {
    return (
      <div key={this.props.location.key}>
        <Spin tip="Loading..." spinning={this.state.loading}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/products/:id" component={Products} />
            <Route exact path="/about" component={About} />
            <Route exact path="/solution" component={Solution} />
            <Route
              exact
              path="/solutionDetails/:id"
              component={SolutionDetails}
            />
            <Route exact path="/download" component={Download} />
            <Route path="/about" component={Download} />
            <Route exact path="/details/:id" component={Details} />
            <Route path="/contact" component={Contact} />
            <Route component={ErrorPage} />
          </Switch>
        </Spin>
      </div>
    );
  }
}

export default withRouter(routers);