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

安装依赖包

yarn add @generouted/react-router 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 />)

路由语法参考