react+vite-plugin-react-router-generator自动化生成路由

前言:

react项目实际使用中有很多提升性能与功能的插件,今天来说一说vite里面提供的vite-plugin-react-router-generator,他主要提供了自动生成路由的功能,配合我们的**@loadable/component**可以实现路由的懒加载与统一管理。

1、实现效果

会自动生成一个jsx文件,将本地文件夹下的文件对应生成路径

2、使用过程

安装

npm/pnpm/cnpm都一样,yarn的话用 yarn add 来安装

javascript 复制代码
npm i vite-plugin-react-router-generator
yarn add vite-plugin-react-router-generator

路由懒加载的安装命令

javascript 复制代码
npm i @loadable/component

vite.config.ts中配置

javascript 复制代码
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的话,配置路由就是:

javascript 复制代码
// 生成的路由配置示例
const routes = [{
  path: '/home',
  element: React.lazy(() => import('@/pages/home')), // 懒加载
}];

反之,不设置或者设置false,配置路由就是:则直接静态导入组件

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

生成的auto.jsx案例:

javascript 复制代码
// 本文件为脚本自动生成,请勿修改



      
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="页面加载中...." /> })

javascript 复制代码
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 } = item
  const 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;
相关推荐
IT_陈寒33 分钟前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞1 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i1 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____1 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �1 小时前
前端转Java,从0到1学习教程
java·前端·学习
小奋斗1 小时前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军1 小时前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023371 小时前
webpack 学习
前端·学习·webpack
云中雾丽1 小时前
flutter中 Future 详细介绍
前端