generouted: 生成式的 + Vite + File based 路由 router

安装依赖包

# 必须安装
yarn add @generouted/react-router

# 已经初始化好项目的可以跳过此步骤
yarn add react-router-dom

对应的 vite 插件，会生成 ./router.tsx 文件，这个不要修改

// vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import generouted from '@generouted/react-router/plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), generouted()],
  resolve: { alias: { '@': '/src' } },
  server: {
    host: '0.0.0.0'
  }
});

main.tsx 入口文件

// src/main.tsx

import { createRoot } from 'react-dom/client'
import { Routes } from '@generouted/react-router'

createRoot(document.getElementById('root')!).render(<Routes />)

相对更加通用的写法 src/main.tsx

import { createRoot } from 'react-dom/client'
import { RouterProvider, createHashRouter } from 'react-router-dom'
import { routes } from '@generouted/react-router'

const router = createHashRouter(routes)
const Routes = () => <RouterProvider router={router} />

createRoot(document.getElementById('root')!).render(<Routes />)

示例代码 _app.tsx

src
├── assets
│   ├── react.svg
│   └── styles
├── main.tsx
├── pages
│   ├── _app.tsx
│   ├── page1
│   ├── page2
│   ├── page3
│   └── page4
├── router.ts
├── shared
│   └── components
└── vite-env.d.ts

示例代码 _app.tsx

import { Outlet } from 'react-router';
import { Link } from 'react-router-dom';

const Page = () => {
  return (
    <div className="flex size-full flex-col">
      <nav className="flex w-full items-center justify-center gap-2 py-2">
        <Link className="btn btn-sm" to="/page1">
          page1
        </Link>
        <Link className="btn btn-sm" to="/page2">
          page2
        </Link>
        <Link className="btn btn-sm" to="/page3">
          page3
        </Link>
        <Link className="btn btn-sm" to="/page4">
          page4
        </Link>
      </nav>
      <div className="flex-1">
        <Outlet />
      </div>
    </div>
  );
};

export default Page;

路由语法参考