vite-plugin-react-router-pages

基于文件的约定式路由插件。

介绍

特性

• vite + react + react-router v6
• 嵌套路由 nested
• 页面组件 index.page.tsx
• 布局组件 layout.tsx
• 动态路径 :name
• lazy + code-splitting
• 路由类型支持 PagesRoutes.xxxx

目录结构

1[you project name]
2- src
3  - pages
4    - home
5      - index.page.tsx // 页面组件
6      - layout.tsx  // 布局组件
7    - user
8      - [userUUID] // 动态路径
9        - index.page.tsx
10        - layout.tsx
11      - setting // 可不提供 layout.tsx，默认 layout 为 <Outlet />
12        - email
13          - index.page.tsx // 嵌套路由
14- react-pages.d.ts // vite 启动生成的的类型文件

已知不支持

• 可选路径 :name?，没想好怎么在文件路径上提现，如果你有好的想法，请联系我。

DEMO

见 ./examples/react

安装

1 Install

1npm i -D vite-plugin-react-router-pages

2 Vite config

添加插件 vite-plugin-react-router-pages 到 vite.config.ts

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3import pages from 'vite-plugin-react-router-pages';
4
5// https://vitejs.dev/config/
6export default defineConfig({
7  plugins: [react(), pages()],
8});

3 tsconfig.json

vite 启动后会插件会生成 react-pages.d.ts，可添加到 tsconfig.json，以便获得 typescript 支持。

1{
2  "compilerOptions": {
3    "types": ["vite/client", "./react-pages.d.ts"]
4  }
5}

使用

1 virtual:react-pages

导入 import { pagesRoutes, PagesRoutes } from "virtual:react-pages";

其中

• pagesRoutes 是 RouteObject[], 可以直接用于 useRoutes(pagesRoutes)。
• PagesRoutes 存储路由路径，可通过 PagesRoutes.HOME 访问页面路径。

1import { useCallback } from 'react';
2import { createRoot } from 'react-dom/client';
3import {
4  BrowserRouter as Router,
5  useRoutes,
6  Navigate,
7  useNavigate,
8  generatePath,
9} from 'react-router-dom';
10import { pagesRoutes, PagesRoutes } from 'virtual:react-pages';
11
12const routes = [
13  {
14    path: '/',
15    element: <Navigate to={PagesRoutes.HOME} />,
16  },
17  ...pagesRoutes,
18];
19
20console.log(routes);
21
22function App() {
23  const navigate = useNavigate();
24  const handleClick = useCallback(() => {
25    navigate(generatePath(PagesRoutes['USER_[USERUUID]'], { userUUID: 'danzi' }));
26  }, [navigate]);
27
28  return (
29    <div className="app">
30      <button onClick={handleClick}>navigate user/danzi</button>
31      {useRoutes(routes)}
32    </div>
33  );
34}
35
36const app = createRoot(document.getElementById('root')!);
37app.render(
38  <Router>
39    <App />
40  </Router>
41);

2 类型支持

由于 react-pages.d.ts 的类型支持，你可以很方便的获取到路由路径。

对于动态路径，如 /user/:userUUID，通过 PagesRoutes['USER_[USERUUID]'] 访问，由于路径上清晰的提现了参数 [USERUUID]，你可以很方便知道参数是 userUUID。

1import { useNavigate, generatePath } from 'react-router-dom';
2
3navigate(generatePath(PagesRoutes['USER_[USERUUID]'], { userUUID: 'danzi' }));

Configuration

1interface Config {
2  /** 默认 ./src/pages/ */
3  pagesPath?: string;
4  /** 生成 d.ts 的目录。 默认 ./react-pages.d.ts */
5  declarePath?: string;
6}

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3import pages from 'vite-plugin-react-router-pages';
4
5// https://vitejs.dev/config/
6export default defineConfig({
7  plugins: [
8    react(),
9    pages({
10      pagesPath: './src/pages/',
11      declarePath: './react-pages.d.ts',
12    }),
13  ],
14});

FAQ

1. 为什么不使用 vite-plugin-pages

• vite-plugin-pages 的 React 部分是 experimental 的，不稳定。其实现覆盖 Vue React Solid，不免有些复杂，不好 fork 来改。
• 我看到基于约定式路由能做更多事情，比如生成 PagesRoutes，and more。
• 研究后发现，非常容易实现，且社区没有一个相对成熟的。

开发

1 安装依赖 pnpm i 2 运行 demo cd examples/react pnpm dev 3 开发调试，修改代码后在根目录 pnpm build，再跑第 2 步看效果。

交流