React懒加载

//懒加载函数
import React ,{ lazy } from 'react'    

import Home from '../views/Home'


const About = lazy(() => import('../views/About'))
const User = lazy(() => import('../views/User'))

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

const routes = [
    {
        path:'/',
        element:<Navigate to='/home'/>
    },
    {
        path:'/home',
        element:<Home/>
    },{
        path:'/about',
        element:<React.Suspense fallback={
            <div>Loading...</div>
        }>

            <About/>

        </React.Suspense>
    }
    ,{
        path:'/user',
        element:<React.Suspense fallback={
            <div>Loading...</div>
        }>
            <User/>
        </React.Suspense>
    }
]

export default routes 

 添加加载提示组件

<React.Suspense fallback={
            <div>Loading...</div>
}>

            <About/>

        </React.Suspense>

不然会报错