React中路由组件的lazyLoad

1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包

    const Login = lazy(()=>import('@/pages/Login'))

    

2.通过指定在加载得到路由打包文件前显示一个自定义loading界面

    loading.....}>

        

            

            

        

    

---

举个例子

import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'

// import Home from './Home'
// import About from './About'

import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))

export default class Demo extends Component {
	render() {
		return (
			

				

					

						
React Router Demo
					
				
				

					

						

							{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
							About
							Home
						
					
					

						

							

								}>
									{/* 注册路由 */}
									
									
								
							
						
					
				
			
		)
	}
}