Generouted + TanStack React Router

How

This integration is based on a Vite plugin to generate routes config for TanStack React Router with generouted conventions. The output is saved at src/routes.gen.tsx and gets updated by the add/change/delete at src/pages/*.

Getting started

In case you don't have a Vite project with React and TypeScript, check Vite documentation to start a new project.

Installation

1pnpm add @generouted/tanstack-react-router @tanstack/router@beta

Optional additional packages for actions and/or loaders:

1pnpm add @tanstack/react-actions@beta @tanstack/react-loaders@beta

Optionally install prettier as a dev dependency so generouted formats the generated src/routes.gen.tsx file automatically:

1pnpm add --save-dev prettier

Setup

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

Usage

1// src/main.tsx
2
3import { createRoot } from 'react-dom/client'
4import { Routes } from './routes.gen'
5
6createRoot(document.getElementById('root')!).render(<Routes />)

Adding pages

Add the home page by creating a new file src/pages/index.tsx → /, then export a default component:

1// src/pages/index.tsx
2
3export default function Home() {
4  return <h1>Home</h1>
5}

Optional root layout at pages/_app.tsx

1// src/pages/_app.tsx
2
3import { Outlet } from '@tanstack/router'
4
5export default function App() {
6  return (
7    <section>
8      <header>
9        <nav>...</nav>
10      </header>
11
12      <main>
13        <Outlet />
14      </main>
15    </section>
16  )
17}

Examples

TanStack React Router

• Basic

License

MIT