前言：

? ? ? ? react項目實際使用中有很多提升性能與功能的插件，今天來說一說vite里面提供的vite-plugin-react-router-generator，他主要提供了自動生成路由的功能，配合我們的@loadable/component可以實現路由的懶加載與統一管理。

1、實現效果

會自動生成一個jsx文件，將本地文件夾下的文件對應生成路徑

2、使用過程

安裝

npm/pnpm/cnpm都一樣，yarn的話用 yarn add 來安裝

npm i vite-plugin-react-router-generator
yarn add vite-plugin-react-router-generator

路由懶加載的安裝命令

npm i @loadable/component

vite.config.ts中配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from "path"// 引入
import ReactRouterGenerator from "vite-plugin-react-router-generator"export default defineConfig({plugins: [react(),reactRouterGenerator({// outputFile必須要有// pagesDir: 'src/pages',  // 指定頁面目錄// outputFile: 'src/routes.ts',  // 輸出路由配置文件outputFile: resolve(".", "./src/router/auto.jsx"),//resolve(".", ...)是為了確保路徑解析的準確性，避免不同操作系統的路徑分隔符問題。format: 'react-router-v6',  // 生成的路由格式，非必須isLazy: true, // 是否懶加載，非必須，如果為 true，生成的組件會通過 React.lazy(() => import('路徑')) 動態導入，實現代碼分割（按需加載comKey: "components" //非必須，組件導入別名 @/components/默認值: 無（通常默認為 'pages' 或 'views'，具體看插件實現）}),],
});

如果這里的設置isLazy設置true的話，配置路由就是：

// 生成的路由配置示例
const routes = [{path: '/home',element: React.lazy(() => import('@/pages/home')), // 懶加載
}];

反之，不設置或者設置false，配置路由就是：則直接靜態導入組件

import Home from '@/pages/home';
const routes = [{ path: '/home', element: <Home /> }];

生成的auto.jsx案例：

// 本文件為腳本自動生成，請勿修改const routes = [{[MENU_PATH]: "/details/person",components: () => import("../pages/details/person.tsx")
}, {[MENU_PATH]: "/form/index",[MENU_LAYOUT]: 'FULLSCREEN',components: () => import("../pages/form/index.tsx")
}, {[MENU_PATH]: "/power/menu",components: () => import("../pages/power/menu.tsx")
}, {[MENU_PATH]: "/power/type",components: () => import("../pages/power/type.tsx")
}, {[MENU_PATH]: "/power/user",components: () => import("../pages/power/user.tsx")
}, {[MENU_PATH]: "/list/card",components: () => import("../pages/list/card.tsx")
}, {[MENU_PATH]: "/list/search",components: () => import("../pages/list/search.tsx")
}, {[MENU_PATH]: "/icons",components: () => import("../pages/icons/index.tsx")
}, {[MENU_PATH]: "/statistics/feedback",components: () => import("../pages/statistics/feedback.tsx")
}, {[MENU_PATH]: "/statistics/visitor",components: () => import("../pages/statistics/vistor.tsx")
}];export default routes

auto.jsx的具體使用：router/index.jsx中使用

路由懶加載方法?

loadable(item.components, { fallback: <Spin style={fellbackStyle} tip="頁面加載中...." /> })

import auto from "./auto.jsx";
import { Navigate } from "react-router-dom";
import Error from "@/pages/err"type LoadingComponent = () => Promise<React.ReactNode>
//定義類型
export interface RouterInfo {components: LoadingComponent | React.ReactNode[MENU_PATH]: string[MENU_KEY]?: any[MENU_TITLE]?: string | any[MENU_KEEPALIVE]?: string | any[name: string]: any
}// 寫的固定的路由
const defaultArr: RouterInfo[] = [{[MENU_PATH]: "/",[MENU_KEY]: "index",components: <Navigate to="/details/person" replace />,},{[MENU_PATH]: "/404",components: <Error />,},.......
]const autoList: RouterInfo[] = []// 循環遍歷我們生成的jsx里面的路由，然后生成最新路由文件，和我們寫的固定的相互合并
auto.forEach(item => {const { components, ...anyProps } = itemconst Com = loadable(item.components, { fallback: <Spin style={fellbackStyle} tip="頁面加載中...." /> })const info = { ...anyProps, components: <Com /> }autoList.push(info)
})const list: RouterInfo[] = [...autoList, ...defaultArr]
export default list;