react中路由懒加载

// 1.引入方法，用于创建路由实例
// createBrowserRouter是用于创建history模式
// createHashRouter是用于创建hash模式
// 路由模式的切换只需要更改创建路由实例的方法就行了，其他地方不需要更改
import { createBrowserRouter,createHashRouter } from 'react-router-dom' 
import { Suspense, lazy } from 'react'; // 引用路由懒加载方法和组件
// 2.引入组件
const Layout = lazy(()=>import('../page/layout'))
const About = lazy(()=>import('../page/about'))
const Home = lazy(()=>import('@/page/home'))



// 3.创建router实例，配置路由
const router = createBrowserRouter([ 
  {
    path:"/layout",
    element:<Layout/>,
    meta:{title:'首页'},
    children:[
      {
        index:true, // 默认显示该路由
        element:<Suspense fallback={'加载中...'}><About/></Suspense>,
        meta:{title:'关于'}
      },
      {
        path:'/layout/home',
        element:<Suspense fallback={'加载中...'}><Home/></Suspense>,
        meta:{title:'家庭'}
      }
    ]
  },
])

// 4.暴露路由实例，用于在App.js主入口组件
export default router;

说明：重点在于lazy方法的使用，Suspense组件只是一个加载中显示的页面

效果展示