快捷導(dǎo)航

React?Router?v6路由懶加載的2種方式小結(jié)

更新時(shí)間：2024年04月18日 08:47:13 作者：佟舟

React?Router?v6?的路由懶加載有2種實(shí)現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來(lái)看看它們的具體實(shí)現(xiàn)方法吧

介紹

React Router v6 的路由懶加載有2種實(shí)現(xiàn)方式，1是使用react-router自帶的 route.lazy，2是使用React自帶的 React.lazy

下面介紹這兩種實(shí)現(xiàn)方式

注：本文內(nèi)容針對(duì)配置式路由，非約定式路由

0. 相同代碼的部分

當(dāng)前我的依賴(lài)包版本 package.json:

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.0"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  },
}

入口文件 src/App.tsx:

import './App.less'
import React from 'react'
import { RouterProvider } from 'react-router-dom'
import { router } from '@/routes'

function App() {
  return <RouterProvider router={router} />
}

export default App

1. React.lazy

依賴(lài) React.lazy + React.Suspense

src/routes/index.tsx:

import React from 'react'
import { createHashRouter, Navigate, RouteObject } from 'react-router-dom'
import Loading from '@/components/Loading'
import BasicLayout from '@/layouts/BasicLayout'
import Page404 from '@/pages/common/404'
import PageLogin from '@/pages/login'

const Page_goodsMng = React.lazy(() => import('@/pages/goods/goodsMng'))

const route404 = {
  path: '*',
  element: <Page404 />,
}

const routes: RouteObject[] = [
  {
    path: '/login',
    element: <PageLogin />
  },
  {
    element: <BasicLayout />,
    children: [
      //// 懶加載代碼
      // 商品管理
      {
        path: '/web/company/goods/goodsmgr',
        element: (
          <React.Suspense fallback={<Loading />}>
            <Page_goodsMng />
          </React.Suspense>
        ),
      },
      route404,
    ],
  },
  route404,
]

export default routes

export const router = createHashRouter(routes as any)

2. react-router 自帶的 route.lazy

src/routes/index.tsx:

import React from 'react'
import { createHashRouter, Navigate, RouteObject } from 'react-router-dom'
import Loading from '@/components/Loading'
import BasicLayout from '@/layouts/BasicLayout'
import Page404 from '@/pages/common/404'
import PageLogin from '@/pages/login'

const routes: RouteObject[] = [
  {
    path: '/login',
    element: <PageLogin />
  },
  {
    element: <BasicLayout />,
    children: [
      //// 懶加載代碼
      // 商品管理
      {
        path: '/web/company/goods/goodsmgr',
        // use react-router route.lazy
        lazy: async () => ({
          Component: (await import('@/pages/goods/goodsMng')).default,
        }),
      },
      route404,
    ],
  },
  route404,
]

export default routes

export const router = createHashRouter(routes as any)

3. 兩種方式的區(qū)別

React.lazy的方式可以配置加載時(shí)的fallback，route.lazy則不支持，也就是說(shuō)當(dāng)懶加載的路由內(nèi)容很大時(shí)，route.lazy的方式很有可能有一段時(shí)間的白屏。

除了fallback，目前我的體驗(yàn)上還沒(méi)發(fā)現(xiàn)其他的區(qū)別，如果還有其他的區(qū)別可以評(píng)論區(qū)討論一下奧

所以對(duì)比來(lái)看的話(huà)，route.lazy好像沒(méi)有什么優(yōu)勢(shì)

那么我就有疑問(wèn)了，我覺(jué)得fallback這個(gè)屬于比較基礎(chǔ)的功能，react-router既然加入的route.lazy的用法，為什么不加 fallback 呢

4. React Router 為什么不自帶fallback功能，要怎么處理？

我找到了一個(gè)react-router的issues，問(wèn)了相同的問(wèn)題，react-router的作者之一進(jìn)行了回答，1是印證了react-router確實(shí)沒(méi)有自帶fallback的功能，2是回答了作者是如何考慮，以及如果想增加fallback的效果要怎么處理

issues: github.com/remix-run/react-router/discussions/10540

作者認(rèn)為：