React之路由懒加载
在项目中，经常不会是只有一两个组件，而是存在着许许多多的路由组件，而默认情况下，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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这样，路由懒加载功能就实现了，需要用到某个组件时才会加载，而不是一次性加载完。
编辑 (opens new window)
上次更新: 7/1/2024, 4:56:33 PM