react路由懒加载之lazy和Suspense引入

import React, { Component,lazy,Suspense } from 'react'
import { BrowserRouter, NavLink, Route, Routes  } from 'react-router-dom';
// import Home from './pages/Home'
// import About from './pages/About'
// import Login from './pages/Login'

// react路由懒加载引入
import './pages/common.css'
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))
const Login = lazy(() => import('./pages/Login'))

export default class App extends Component {
  render() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter>
        <ul>
          <li><NavLink to="/" exact="true" activeclassname="active">首页</NavLink></li>
          <li><NavLink to="/about"  activeclassname="active">关于我们</NavLink></li>
          <li><NavLink to="/login"  activeclassname="active">登录页</NavLink></li>
        </ul>
        <Routes> 
          {/* v6的写法 Switch被 Routes代替 component被element代替 */}
          <Route path="/" element={<Home/>}></Route>
          <Route path="/about" element={<About/>}></Route>
          <Route path="/login" element={<Login/>}></Route>
        </Routes>
      </BrowserRouter>
      </Suspense>
    )
  }
}