在项目中，经常不会是只有一两个组件，而是存在着许许多多的路由组件，而默认情况下，react 会全部加载，不管某个组件你是否用得上，一次性给你加载完，这样体验不太好。那么可不可以这样，就是在我们需要使用的时候才加载该组件呢？答案当然是有的，这里用到了 react 自带的 lazy 方法，在配置路由的时候这样配置

1、在路由配置文件中配置如下：

// /src/routes/routes.js
import {lazy} from 'react';
const Home = lazy(() => import("../components/Home"))
const Page1 = lazy(() => import("../components/Page1/Page1"))
const Page2 = lazy(() => import("../components/Page2/Page2"))

// 嵌套路由配置
const routes = [
	{
		path: "/",
		element: <Home />,
		children: [
			{
				path: "page1",
				element: <Page1 />
			},
			{
				path: "page2",
				element: <Page2 />
			}
		]
	},
]

// 非嵌套路由配置
// const routes = [
// 	{
// 		path: "/",
// 		element: <Home />,
// 		children: []
// 	},
// 	{
// 		path: "/page1",
// 		element: <Page1 />
// 	},
// 	{
// 		path: "/page2",
// 		element: <Page2 />
// 	}
// ]

export default routes

2、在项目根目录下的 app 组件中配置如下：

import React, { Suspense } from 'react';
import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
import routes from './routes/routes.js'

export default function App () {
  const GetRoutes = () => {
    const route = useRoutes(routes)
    return route
  }
  return (
    <Router>
    	{/* Suspense是必须要配置的，否则会报错，fallback表示懒加载中的提示，当组件未加载时展示该内容 */}
      <Suspense fallback={<div>Loading...</div>}>
        <GetRoutes />
      </Suspense>
    </Router>
  )
}

这样，路由懒加载功能就实现了，需要用到某个组件时才会加载，而不是一次性加载完。