File-based routing: Vite + react-router-dom + generouted

npm create vite@latest my-app -- --template react

cd my-app
npm i

npm i react-router-dom @generouted/react-router

// vite.config.ts

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

export default defineConfig({
  plugins: [react(), generouted()]
})

cd src
touch main.tsx

// src/main.tsx

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

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

// src/pages/index.tsx
export default function Home() {
  return <h1>Home</h1>
}

// src/pages/users.tsx

export function Loader() {
  // ...
  return { /* your data */ }
}

export function Action({ request }: ActionFunctionArgs) {
  // ...
}

export default function Users() {
  return <h1>List of users</h1>
}