react扩展2_lazyLoad

路由组件的懒加载是在点击的时候再将组件加载进去。
使用lazy（）将组件导入：

• const Home=lazy(()=> import('./Home/index') )
• const About=lazy(()=> import('./About/index') )

使用Suspense将注册路由包裹：

<Suspense fallback={<Loading/>}>
       <Routes>
          <Route path='/about' element={<About/>} />
          <Route  path='/home/*' element={<Home/>} />
       </Routes>     
</Suspense>

完整版

import React, { Component, lazy, Suspense } from 'react'
import {Route, Routes,NavLink} from 'react-router-dom'
import './home.css'

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

export default class Demo extends Component {
  render() {
    return (
      <div>
        <div>
          {/* 在react中靠路由链接实现切换组件 */}
        <NavLink to='/about'>about</NavLink>
        <NavLink to='/home'>Home</NavLink>
        </div>
        <div>
          {/* 注册路由 */}
          <Suspense fallback={<Loading/>}>
          <Routes>
          <Route path='/about' element={<About/>} />
          <Route  path='/home/*' element={<Home/>} />
          </Routes>     
          </Suspense>    
        </div>
      </div>
    )
  }
}