vite-plugin-auto-react-router

介绍

vite-plugin-auto-react-router 是一个基于 vite 自动生成路由的插件，可以快速开发 react 项目。

安装

npm install react react-router-dom
npm install vite-plugin-auto-react-router -D

配置

| 参数名 | 类型 | 默认值 | 说明 | | ------------------- | -------- | --------------------- | ------------------------------------------------------------ | | name | string | routes | 路由导出名称 | | pageDir | string | ./src/views | 指定目录下页面 | | pageFileType | string[] | ['jsx', 'tsx', 'mdx'] | 指定目录下页面类型 | | output | string | ./src/rotuer | 路由文件生成目录 | | outputType | string | .tsx | 路由文件生成的文件类型("jsx" | "tsx") | | auth | boolean | false | 是否开启认证路由 | | lazy | boolean | false | 是否开启懒加载路由 | | watch | boolean | true | 是否开启监听文件变化，自动重新生成路由 | | enableVirtualRouter | boolean | false | 是否开启虚拟路由（注意，开启虚拟路由后，auth,output,outputType不再生效） |

支持对某些特殊页面进行微调配置

import {} from 'react'

// 控制当前页面需要开启认证才能访问，认证方式采用插件生成的默认 AuthRoute.tsx , 使用者可以自由修改 AuthRoute.tsx 的规则（仅在 `enableVirtualRouter` 下生效）,默认值采用配置的 `auth`
export const META_AUTH = true;

// 控制当前页面是否开启懒加载形式,默认值采用配置的 `auth`
export const META_LAZY = true;

export const User = () => {
  return <div>User</div>
}

export default User

支持自定义_layout.tsx 方式布局

目录结构
views
│  index.tsx				// 目录下将应用 默认布局
│  
├─app
│      index.tsx
│      styles.css
│      
├─detail
│  │  _layout.tsx			// ./views/detail 目录下都将应用 _layout.tsx 的布局
│  │  
│  └─__id
│          index.tsx
│          info.tsx
│
└─user
        a.tsx
        b.tsx
        blog.w.o.layout.tsx
        index.tsx
        _layout.tsx		     // ./views/user 目录下都将应用 _layout.tsx 的布局

// 案列：_layout.tsx

import {  } from 'react'
import { Outlet } from 'react-router-dom'


export default function App() {
  return (
      <div className='app'>
        这里是 detail layout
        <Outlet />
      </div>
  )
}

使用（使用虚拟路由，灵活性高）

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// @ts-ignore
import AutoRouter from 'vite-plugin-auto-react-router'
// @ts-ignore
import path from 'path'

const pathResolve = (dir: string) => {
  return path.resolve('.', dir)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    AutoRouter({
      name: "routes",
      pageDir: "./src/views",
      pageFileType: ['jsx', 'tsx'],
      lazy: true,
      enableVirtualRouter: true,
    }),
  ],
  resolve: {
    extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss', '.css', ],
    alias: {
      '@': pathResolve("src"),
    },
  },
})

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

// @ts-ignore
import routes from 'virtual:auto-router'

const router = createBrowserRouter(routes)

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} fallbackElement={<div>loading...</div>} />
  </React.StrictMode>,
)

使用（生成路由文件在本地，可以自由修改，灵活性更高）

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// @ts-ignore
import AutoRouter from 'vite-plugin-auto-react-router'
// @ts-ignore
import path from 'path'

const pathResolve = (dir: string) => {
  return path.resolve('.', dir)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    AutoRouter({
      name: "routes",
      pageDir: "./src/views",
      pageFileType: ['jsx', 'tsx'],
      output: "./src/router",
      outputType: "tsx",
      auth: true,
      lazy: true,
      watch: true,
    }),
  ],
  resolve: {
    extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss', '.css', ],
    alias: {
      '@': pathResolve("src"),
    },
  },
})

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
// 导入生成的路由文件
import routes from './router/routes';

const router = createBrowserRouter(routes)

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} fallbackElement={<div>loading...</div>} />
  </React.StrictMode>,
)

路径规则

| 文件路径 | 路由路径 | | ------------------------------------ | --------------------- | | ./src/views/index.tsx | / | | ./src/views/app/index.tsx | /app | | ./src/views/user/a.tsx | /user/a | | ./src/views/user/index.tsx | /user | | ./src/views/user/blog.w.o.layout.tsx | /user/blog/w/o/layout | | ./src/views/detail/__id/index.tsx | /detail/:id | | ./src/views/detail/__id/info.tsx | /detail/:id/info |