vite-plugin-pages: 文件式路由 file-based router

安装 vite-plugin-pages 插件

yarn add --dev vite-plugin-pages

配置如下

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import Pages from "vite-plugin-pages";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    Pages({
      // 排除 _ 开头的文件
      exclude: ["**/**/_*"],
    }),
  ],
});

文件 main.tsx

import { StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import {
  BrowserRouter,
  useRoutes,
} from 'react-router-dom'

import routes from '~react-pages'

import './index.css'

// eslint-disable-next-line no-console
console.log(routes)

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      {useRoutes(routes)}
    </Suspense>
  )
}

const app = createRoot(document.getElementById('root')!)

app.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

vite-env.d.ts 支持 ~pages

/// <reference types="vite-plugin-pages/client-react" />

示例 tree src 结果

.
├── favicon.svg
├── index.css
├── logo.svg
├── main.tsx
└── pages
    ├── [...all].tsx
    ├── __test__
    │   └── index.tsx
    ├── about
    │   └── index.tsx
    ├── about.tsx
    ├── blog
    │   ├── [...all].tsx
    │   ├── [id].tsx
    │   ├── index.tsx
    │   └── today
    │       ├── [...all].tsx
    │       └── index.tsx
    ├── components.tsx
    ├── index.tsx
    └── posts
        ├── [...all].tsx
        ├── [id]
        │   ├── edit.tsx
        │   └── index.tsx
        ├── add.tsx
        └── index.tsx

8 directories, 20 files