@moccona/vite-plugin-react-conventional-router NPM

@moccona/vite-plugin-react-conventional-router

这个库只基于 react-router 实现，与 react-router 的功能高度集成。其他的路由库暂时不支持，比如 @tanstack/react-router

安装与配置

先安装 react-router 和 react-router-dom

npm i react-router react-router-dom

安装插件

npm i @moccona/vite-plugin-react-conventional-router -D

配置插件

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import conventionalRouter from "@moccona/vite-plugin-react-conventional-router"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    conventionalRouter({
      // 需要解析为路由的文件
      include: ["src/pages/**"],
      // 需要被排除解析的文件
      exclude: ["src/**/components/**","src/**/hooks/**"]
    }),
  ],
})

//

添加虚拟路由模块类型定义文件到 tsconfig.json ，避免导入路有配置的时候报 MODULE NOT FOUND 的错误。

{
  //...
  "include": [
    "src",
    "./node_modules/@moccona/vite-plugin-react-conventional-router/client.d.ts"
  ]
}

从虚拟路由模块中导入生成的路由数据，然后创建路由

import routes from "virtual:routes"
import { createBrowserRouter, RouterProvider } from "react-router-dom";

export default function App() {
  return <div id="main">
    <RouterProvider
      router={createBrowserRouter(routes)}
      fallbackElement={
        <div>
          Loading
        </div>
      }
    />
  </div>
}

文件名与路由的映射关系

`src/pages/index.tsx`           -> `/`
`src/pages/home.tsx`            -> `/home`
`src/pages/home.list.tsx`       -> `/home/list`
`src/pages/home.@id.tsx`        -> `/home/:id`
`src/pages/home.list.$id.tsx`   -> `/home/list/:id?`
`src/pages/blog/_.tsx`   -> `/home/blog/*`