Getting started
npm create vite@latest my-app -- --template react
cd my-app
npm i
npm i react-router-dom @generouted/react-router
Setup
// 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()]
})
Create the entry point
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 />)
Pages
Pages/routes go in the src/pages
directory
// src/pages/index.tsx
export default function Home() {
return <h1>Home</h1>
}
Loaders/Actions
// 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>
}
Actions/Loaders are case sensitive, always use
Loader
,Action
Due to a bug,
action
s are not supported in index routes i.e pages withsrc/pages/users/index.tsx
orsrc/pages/projects/[id]/index.tsx
. To use actions the page must not be namedindex.{(j|t)xs}
Links
https://github.com/oedotme/generouted
https://reactrouter.com/en/main
https://vitejs.dev/guide/