vite-plugin-react-router

感谢来自 UMI 框架提供的灵感。

路由的生成规则部分借鉴于 UMI 框架，有部分区别就是：1、取消全局 Layout 想要使用不同的 Layout 请在 routesDir 配置的路径下面的 _layout.tsx 里面进行处理，方法和 UMI 框架里面的全局 Layout 一样。2、动态路由的匹配方式不使用 [] ，因为我发现 vscode 软件下对存在 [] 的路径下的文件没法进行搜索。

感谢 vite-plugin-pages 的作者 hannoeru 提供 vite 文件系统处理方面的灵感

使用方法

安装

# npm
npm install vite-plugin-react-router -D
# yarn
yarn add vite-plugin-react-router -D

配置

// 以下配置为默认配置
import RouterPlugin from "vite-plugin-react-router";
export default defineConfig({
    plugins: [
        RouterPlugin({
            routesDir: [{ baseRoute: "", dir: "src/pages" }],
            extensions: ["tsx"]
            exclude:[/components/],
            hash:false,
            loading:'',
            notFound:''
        })
    ]
});

参数	解释	默认值	是否比传
routesDir	路由配置，指定路由文件根目录和路由路径根目录	无	是
extensions	路由组件的文件扩展	`["tsx"]`	否
exclude	排除在外的文件或文件路径的匹配正则	`[/components/]`	否
hash	指定是否弃用 hash 路由模式	`false`	否
loading	配置指定加载组件，可以用于骨架屏。		否
notFound	配置指定 404 组件。如果没有指定 404 组件，则本级目录默认使用上级目录的 404 组件		否

使用

import React from "react";
import ReactDOM from "react-dom";
import RouteRoot, { history, routes } from "virtual:generated-routes";
import "./index.css";
import App from "./App";

// 自定义 history
// console.log("history", history);
// 生成的 routes
// console.log("routes", routes);

ReactDOM.render(<RouteRoot />, document.getElementById("root"));

约定式路由规则

// { baseRoute: "", dir: "src/pages" }
// 比如以下文件结构：
// └── pages
//     ├── index.tsx
//     └── users.tsx
// 会得到一下的路由配置
[
    { exact: true, path: "/", component: "/src/pages/index.tsx" },
    { exact: true, path: "/users", component: "/src/pages/users.tsx" }
];

仅匹配 extensions 配置里面的文件类型，默认是 tsx
不匹配 exclude 配置正则表达式匹配的内容，默认是 [/components/]

动态路由和可选参数路由

文件或文件夹以 $ 开头的为动态路由
文件或文件夹以 $ 开头且以 $ 结尾的为可选参数路由

// { baseRoute: "", dir: "src/pages" }
// 比如以下文件结构：
// └── src
//     └── pages
//         └── article
//             └──$id$.tsx
//         └── user
//             └── $id
//                 └──edit.tsx
// 会得到一下的路由配置
[
    { exact: true, path: "/article/:id?", component: "/src/pages/article/$id$.tsx" },
    { exact: true, path: "/user/:id/edit", component: "/src/pages/user/$id/edit.tsx" }
];

嵌套路由

目录下有 _layout.tsx 时会生成嵌套路由，以 _layout.tsx 为该目录的 layout。layout 文件需要返回一个 React 组件，并通过 props.children 渲染子组件。

// { baseRoute: "", dir: "src/pages" }
// 比如以下文件结构：
// └── src
//     └── pages
//         └── users
//             ├── _layout.tsx
//             ├── index.tsx
//             └── list.tsx
// 会得到一下的路由配置
[
    {
        exact: false,
        path: "/users",
        component: "/src/pages/users/_layout",
        routes: [
            { exact: true, path: "/users", component: "/src/pages/users/index" },
            { exact: true, path: "/users/list", component: "/src/pages/users/list" }
        ]
    }
];

404 路由

约定 src/pages/404.tsx 为 404 页面，需返回 React 组件。

// { baseRoute: "", dir: "src/pages" }
// 比如以下文件结构：
// └── src
//     └── pages
//         ├── 404.tsx
//         ├── index.tsx
//         └── users.tsx
// 会得到一下的路由配置
[
    { exact: true, path: "/", component: "/src/pages/index" },
    { exact: true, path: "/users", component: "/src/pages/users" },
    { exact: false, path: "/*", component: "/src/pages/404" }
];

// 这样，如果访问 /foo，/ 和 /users 都不能匹配，会 fallback 到 404 路由，通过 src/pages/404.tsx 进行渲染。

常见问题

1、ts 提示：找不到模块“virtual:generated-routes”或其相应的类型声明。

tsconfig.json 配置，将 vite-plugin-react-router/client 放入到 tsconfig.json types 配置里面
2、eslint 提示：Unable to resolve path to module 'virtual:generated-routes'.eslintimport/no-unresolved。

在 import RouteRoot, { history, routes } from "virtual:generated-routes"; 这行上增加 // eslint-disable-next-line import/no-unresolved

git 提交规范(Angular 规范)

feat 新增一个功能

fix 修复一个 Bug

docs 文档变更

style 代码格式（不影响功能，例如空格、分号等格式修正）

refactor 代码重构

perf 改善性能

test 测试

build 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）

ci 更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等

chore 开发工具变动(构建、脚手架工具等)

revert 代码回退

morelearn1990/vite-plugin-react-router