react-router-dom v6的路由懒加载形式，这里写了两种

软件定制，代码排错：小蓝阿姨的店铺

---

前言

react-router-dom第6版本的这个Route改动的有点小大
之前的路由渲染方式是按照

// v6版本之前的
<Route
	path={router.path}
	component = { router.component }
/>

在v6版本中，这个组件改动有点小大，把component这个属性改成了element，传进去的组件需要使用个尖括号包起来

// v6
<Route
	path={router.path}
	element = { <router.component /> }
/>

第一种

使用Suspense, lazy进行路由懒加载
我这边使用的是typescript，写法和js一样的，可以直接搬走
渲染出界面的地方

import React, { Suspense } from 'react'
import { Route, Routes } from 'react-router-dom'

import router from '@/router' 

class MyMain extends React.Component{
  render() {
    return (
      <main>
        <Routes>
          {
            router.map((item, i) => {
              return (
                <Route key={i} path={item.path} element={
                  <Suspense fallback={
                    <div>路由懒加载...</div>
                  }>
                    < item.component />
                  </Suspense>
                } />
              )
            })
          }
        </Routes>
      </main>
    )
  }
}

export default MyMain

路由表

import { lazy } from 'react'
// 如果你是js就直接无视这个interface的定义
interface Router {
  name?: string,
  path: string,
  children?: Array<Router>,
  component: any
}
// 如果你是js就直接无视这个: Array<Router>的类型限定
const router: Array<Router> = [
  {
    path: '/',
    component: lazy(() => import('@/views/home'))
  },
  {
    path: '/about',
    component: lazy(() => import('@/views/about'))
  }
]

export default router

第二种

使用react-loadable进行路由懒加载
需要安装依赖
yarn add react-loadable 或者 npm i react-loadable
如果你是typescript
你还需要额外安装一个依赖
yarn add @types/react-loadable 或者 npm i @types/react-loadable
我这边使用的是yarn
yarn add react-loadable @types/react-loadable

渲染出界面的地方

import React, { Suspense } from 'react'
import { Route, Routes } from 'react-router-dom'

import router from '@/router' 

class MyMain extends React.Component{
  render() {
    return (
      <main>
        <Routes>
          {
            router.map((item, i) => {
              return (
                <Route
                  key={i}
                  path={item.path}
                  element={ < item.component /> }
                />
              )
            })
          }
        </Routes>
      </main>
    )
  }
}

export default MyMain

路由表

import React from 'react'
import loadable from 'react-loadable' //引入这个loadable，使用这个来加载路由
// 如果你是js就直接无视这个interface的定义
interface Router {
  name?: string,
  path: string,
  children?: Array<Router>,
  component: any
}
const LoadingTip = () => <div>懒加载路由ing...</div>
// 如果你是js就直接无视这个: Array<Router>的类型限定
const router: Array<Router> = [
  {
    path: '/',
    component: loadable({
      loader: () => import('@/views/home'), // 需要异步加载的路由
      loading: LoadingTip // 这是一个的提示
    })
  },
  {
    path: '/about',
    component: loadable({
      loader: () => import('@/views/about'),
      loading: LoadingTip
    })
  }
]

export default router

结尾

有误的话欢迎指正，互相学习互相交流，路过的可以点个赞啥的吗