路由懒加载可以避免进入页面时就把全部的组件加载，懒加载可以做到访问对应路由的时候再进行路由组件的加载。

react 中采用lazy来包裹组件，返回一个懒加载的组件。

import { lazy } from 'react'
// Navigate重定向组件
import { Navigate } from 'react-router-dom'

// Home不需要路由懒加载，因为一开始肯定是会看到Home组件的
import Home from '../views/Home'
const About = lazy(() => import('../views/About'))
const User = lazy(() => import('../views/User'))

const routes = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/user',
        element: <User />
    }
]