Nondeterministic Postrequisite Metaprotocol

    @viterjs/vite-plugin-react-router-config
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    vite-plugin-react-router-config

    用于实现完全配置式的编写路由,自动生成路由相关文件

    用法

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import path from 'path'
    import reactRouter from '@viterjs/vite-plugin-react-router-config'
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        react(),
        reactRouter({
          routes: [
            { path: '/home', component: './home' },
            { path: '/about', component: './about' },
          ], // 路由配置
          dynamicImport: true, // 动态加载路由
          entryPath: './temp', // 入口文件生成路径
        }),
      ],
      server: {
        open: '/home',
      },
    })

    详细插件配置

    path

    • Type: string

    配置路由路径,与 react-router@6 的 path 要求一致

    component

    • Type: string

    配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径,也可以是相对路径,如果是相对路径,会从 src/pages 目录开始找起。

    如果指向 src 目录的文件,可以自行配置 alias,也可以用 ../。比如 component: '../layouts/index'

    routes

    配置子路由,通常在需要为多个路径增加 layout 组件时使用。

    比如:

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import reactRouter from '@viterjs/vite-plugin-react-router-config'
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        react(),
        reactRouter({
          routes: [
            { path: '/home', component: './home' },
            {
              path: '/',
              component: '@/layouts',
              routes: [
                { path: '/form', component: './form' },
                { path: '/table', component: './table' },
              ],
            },
          ],
        }),
      ],
    })

    然后在 src/layout/index 中通过 <Outlet> 渲染子路由,

    import { Outlet } from 'react-router-dom'
    export default (props) => {
      return (
        <div style={{ padding: 20 }}>
          <Outlet />
        </div>
      )
    }

    这样,访问 /form/table 就会带上 src/layouts/index 这个 layout 组件。

    redirect

    • Type: string

    配置路由跳转。

    比如:

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import reactRouter from '@viterjs/vite-plugin-react-router-config'
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        react(),
        reactRouter({
          routes: [
            { path: '/', redirect: '/home' },
            { path: '/home', component: './home' },
          ],
        }),
      ],
    })

    访问 / 会跳转到 /home,并由 src/pages/home 文件进行渲染。

    dynamicImport

    • Type: { loading: string } | boolean

    配置路由按需加载。路由按需加载功能默认是关闭的,你需要在使用之前先通过配置开启,配置中包含 loading 选项,用于配置加载状态时展示的组件地址,如果不配置或配置为true会展示默认加载组件。

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import reactRouter from '@viterjs/vite-plugin-react-router-config'
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        react(),
        reactRouter({
          dynamicImport: { loading: './Loading' },
        }),
      ],
    })

    页面跳转

    由于本框架路由模块基于 react-router@6 ,路由的基础跳转用法与 react-router@6 保持一致。实例如下:

    import { useNavigate } from 'react-router-dom'
    
    // FC 组件
    function xxx() {
      const navigate = useNavigate()
      // 跳转 home
      navigate('/home')
      // 后退
      navigate(-1)
    }

    选项

    export interface IRoute {
      component?: string
      path?: string
      routes?: IRoute[]
      title?: string
      redirect?: string
      [key: string]: any
    }
    export interface IDynamicImportConfig {
      loading?: string
      [key: string]: any
    }
    export type IDynamicImport = boolean | IDynamicImportConfig | undefined
    
    export type Options = {
      routes?: Array<IRoute>
      dynamicImport?: IDynamicImport & boolean
      routerBase?: string
      entryPath?: string
      containerID?: string
    }

    Install

    npm i @viterjs/vite-plugin-react-router-config

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    36.2 kB

    Total Files

    42

    Last publish

    Collaborators

    • suanmeixiansheng
    • jerry_x