Gathering detailed insights and metrics for @moccona/vite-plugin-react-conventional-router
Gathering detailed insights and metrics for @moccona/vite-plugin-react-conventional-router
Installations
npm install @moccona/vite-plugin-react-conventional-routerDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
22.15.0
NPM Version
10.9.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.2.8
Package Id
@moccona/vite-plugin-react-conventional-router@0.2.8
Unpacked Size
48.18 kB
Size
13.31 kB
File Count
7
NPM Version
10.9.2
Node Version
22.15.0
Published on
Jun 17, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
@moccona/vite-plugin-react-conventional-router
这个库只基于 react-router 实现，与 react-router 的功能高度集成。其他的路由库暂时不支持，比如 @tanstack/react-router
安装与配置
- 先安装 react-router 和 react-router-dom
1npm i react-router react-router-dom
- 安装插件
1npm i @moccona/vite-plugin-react-conventional-router -D
- 配置插件
1// vite.config.ts 2import { defineConfig } from 'vite' 3import react from '@vitejs/plugin-react' 4import conventionalRouter from "@moccona/vite-plugin-react-conventional-router" 5 6// https://vitejs.dev/config/ 7export default defineConfig({ 8 plugins: [ 9 react(), 10 conventionalRouter({ 11 // 需要解析为路由的文件 12 include: ["src/pages/**"], 13 // 需要被排除解析的文件 14 exclude: ["src/**/components/**","src/**/hooks/**"] 15 }), 16 ], 17}) 18 19//
- 添加虚拟路由模块类型定义文件到 tsconfig.json ， 避免导入路有配置的时候报 MODULE NOT FOUND 的错误。
1{ 2 //... 3 "include": [ 4 "src", 5 "./node_modules/@moccona/vite-plugin-react-conventional-router/client.d.ts" 6 ] 7}
- 从虚拟路由模块中导入生成的路由数据，然后创建路由
1import routes from "virtual:routes" 2import { createBrowserRouter, RouterProvider } from "react-router-dom"; 3 4export default function App() { 5 return <div id="main"> 6 <RouterProvider 7 router={createBrowserRouter(routes)} 8 fallbackElement={ 9 <div> 10 Loading 11 </div> 12 } 13 /> 14 </div> 15}
文件名与路由的映射关系
1`src/pages/index.tsx` -> `/` 2`src/pages/home.tsx` -> `/home` 3`src/pages/home.list.tsx` -> `/home/list` 4`src/pages/home.@id.tsx` -> `/home/:id` 5`src/pages/home.list.$id.tsx` -> `/home/list/:id?` 6`src/pages/blog/_.tsx` -> `/home/blog/*`
Layout
两种布局组件格式。
-
**/layout.tsx
作为同级目录下的布局组件。
-
**/pageName.layout.tsx
作为page路由的布局组件。
ErrorBoundary
两种错误边界组件格式。
-
**/errorBoundary.tsx
作为同级目录下的错误边界组件。
-
**/page.errorBoundary.tsx
作为page路由的错误边界组件。
如何组织路由文件内容
文件内容组织参考 react-router 的 lazy 部分。唯一不同的是，默认到处会作为 Component 被使用。
环境变量
插件支持从环境变量中读取 browser router 的配置。
- BASE_NAME 用程序的basename，用于不能部署到域的根目录，而是一个子目录的情况。
Todos
- "virtual:routes" module for routes export.
- Support dynamic route.
- Support optional route.
- Split loader/action into individual file.
- Support reading router configuration from .env file.
- Migrate react-router from v6 to v7.
No vulnerabilities found.
No security vulnerabilities found.