React Router v6路由懒加载的2种方式小结

{
  "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"
  },
}

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

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)

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)