react优化——懒加载配置路由

1.引用Suspense, lazy

import React, { Component, lazy, Suspense } from "react";

2.将import改为函数形式，作为lazy的参数

// import User from "../user/User"
// import Role from "../role/Role"
const Home = lazy(()=> import("../home/Home"))
const HomeProduct = lazy(()=> import("../product/HomeProduct"))
const AddUpdateProduct = lazy(()=> import("../product/AddUpdateProduct"))
const DetailProduct = lazy(()=> import("../product/DetailProduct"))
const Category = lazy(()=> import("../category/Category"))
const Bar = lazy(()=> import("../charts/Bar"))
const Line = lazy(()=> import("../charts/Line"))
const Pie = lazy(()=> import("../charts/Pie"))
const User = lazy(()=> import("../user/User"))
const Role = lazy(()=> import("../role/Role"))

3.采用Suspense嵌套在Switch外层,并可以给Suspense的回调传入一个组件,用于加载中的显示

<Suspense fallback={<div>Loading...</div>}>
                        <Switch>
                            <Route path="/admin/home" component={Home}/>
                            <Redirect exact from="/admin/product" to="/admin/product/home"/>
                            <Route path="/admin/product/home" component={HomeProduct}/>
                            <Route path='/admin/product/addupdate'   component={AddUpdateProduct}/>
                            <Route path='/admin/product/detail' component={DetailProduct}/>


                            <Route path="/admin/category" component={Category}/>
                            <Route path="/admin/user" component={User}/>
                            <Route path="/admin/role" component={Role}/>
                            <Route path="/admin/charts/bar" component={Bar}/>
                            <Route path="/admin/charts/line" component={Line}/>
                            <Route path="/admin/charts/pie" component={Pie}/>
                        </Switch>
</Suspense>

4.其他导入

import {Switch, Route, Redirect} from 'react-router-dom'

5. 引用的全部代码App.js(可不阅读)

import React, { Component, lazy, Suspense } from "react";
import storage from '../../utils/storage'
import { Layout } from 'antd';
import {Switch, Route, Redirect} from 'react-router-dom'
import LeftNav from '../../components/left-nav/LeftNav'
import Header from '../../components/header/Header'
// import Home from '../home/Home'
// import Product from '../product/Product'
// import HomeProduct from "../product/HomeProduct"
// import AddUpdateProduct from "../product/AddUpdateProduct"
// import DetailProduct from "../product/DetailProduct"
// import Category from "../category/Category"
// import Bar from "../charts/Bar"
// import Line from "../charts/Line"
// import Pie from "../charts/Pie"
// import User from "../user/User"
// import Role from "../role/Role"
const Home = lazy(()=> import("../home/Home"))
const HomeProduct = lazy(()=> import("../product/HomeProduct"))
const AddUpdateProduct = lazy(()=> import("../product/AddUpdateProduct"))
const DetailProduct = lazy(()=> import("../product/DetailProduct"))
const Category = lazy(()=> import("../category/Category"))
const Bar = lazy(()=> import("../charts/Bar"))
const Line = lazy(()=> import("../charts/Line"))
const Pie = lazy(()=> import("../charts/Pie"))
const User = lazy(()=> import("../user/User"))
const Role = lazy(()=> import("../role/Role"))
const { Sider, Content, Footer } = Layout;
class Admin extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
	  const user = storage.getUser();
	  if (user === null) {
		  return <Redirect to="/login"/>

	  }
    return (
		  <Layout style={{height:'100%'}}>
			  <Sider>
				  <LeftNav/>
			  </Sider>
			  <Layout>
				  <Header/>
				  <Content
				  	style={{
				  		background: "#fff",
						margin: '20px'
					}}>
					  <Suspense fallback={<div>Loading...</div>}>
						  <Switch>
							  <Route path="/admin/home" component={Home}/>
							  <Redirect exact from="/admin/product" to="/admin/product/home"/>
							  <Route path="/admin/product/home" component={HomeProduct}/>
							  <Route path='/admin/product/addupdate'   component={AddUpdateProduct}/>
							  <Route path='/admin/product/detail' component={DetailProduct}/>


							  <Route path="/admin/category" component={Category}/>
							  <Route path="/admin/user" component={User}/>
							  <Route path="/admin/role" component={Role}/>
							  <Route path="/admin/charts/bar" component={Bar}/>
							  <Route path="/admin/charts/line" component={Line}/>
							  <Route path="/admin/charts/pie" component={Pie}/>
						  </Switch>
					  </Suspense>
				  </Content>
				  <Footer
				  	style={{textAlign:'center', fontWeight: 'blod', fontSize: '17px'}}
				  >
					  react + koa + mongo
				  </Footer>
			  </Layout>
		  </Layout>
    );
  }
}

export default Admin;