I enjoyed using file-based routing since I tried Next.js (pages directory). After applying the same concept with Vite and client-side applications, I started writing blog posts covering the implementation of client-side file-based routing with React Router which was packaged later as generouted.

Today generouted brings many features, supports multiple frameworks and routers, and inspires ideas and conventions from Next.js, Remix, Expo, Docusaurus, SvelteKit and more.

generouted uses Vite's glob import API to list the routes within the src/pages directory and generates the routes tree and modals based on generouted's conventions.

There are also Vite plugins available for some integrations to provide type-safe components/hooks/utils through code-generation.

React Router

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/react-router react-router

Setup

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

Usage

1// src/main.tsx
2
3import { createRoot } from 'react-dom/client'
4import { Routes } from '@generouted/react-router'
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:

1export default function Home() {
2  return <h1>Home</h1>
3}

Check the routing conventions section below.

Docs

You can find more details about type-safe navigation and global modals at @generouted/react-router docs.

Examples

• Type-safe navigation + global modals
• Custom integration
• Custom integration with custom path
• MDX routes

Solid Router

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

Installation

1pnpm add @generouted/solid-router @solidjs/router

Setup

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

Usage

1// src/main.tsx
2
3import { render } from 'solid-js/web'
4import { Routes } from '@generouted/solid-router'
5
6render(Routes, document.getElementById('root')!)

Adding pages

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

1export default function Home() {
2  return <h1>Home</h1>
3}

See more about generouted routing conventions below.

Docs

You can find more details about type-safe navigation and global modals at @generouted/solid-router docs.

Examples

• Type-safe navigation + global modals

TanStack React Router — In-progress experimental support 🧪

Check out the docs here

Examples

• Basic

React Location — Deprecated 🚨

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-location

Usage

1// src/main.tsx
2
3import { createRoot } from 'react-dom/client'
4import { Routes } from 'generouted/react-location'
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:

1export default function Home() {
2  return <h1>Home</h1>
3}

Examples

• Basic
• Data loaders
• Modals
• Nested layouts

1src/pages
2├── (auth)
3│   ├── _layout.tsx
4│   ├── login.tsx
5│   └── register.tsx
6├── blog
7│   ├── _components
8│   │   ├── button.tsx
9│   │   └── comments.tsx
10│   ├── [...all].tsx
11│   ├── [slug].tsx
12│   ├── _layout.tsx
13│   ├── index.tsx
14│   └── tags.tsx
15├── docs
16│   ├── -[lang]
17│   │   ├── index.tsx
18│   │   └── resources.tsx
19│   └── -en
20│       └── contributors.tsx
21├── +info.tsx
22├── 404.tsx
23├── _app.tsx
24├── _ignored.tsx
25├── about.tsx
26├── blog.w.o.layout.tsx
27└── index.tsx

There are multiple approaches to achieve that. If you prefer handling the logic in one place, you can define the protected routes with redirection handling within a component:

1// src/config/redirects.tsx
2
3import { Navigate, useLocation } from 'react-router'
4
5import { useAuth } from '../context/auth'
6import { Path } from '../router'
7
8const PRIVATE: Path[] = ['/logout']
9const PUBLIC: Path[] = ['/login']
10
11export const Redirects = ({ children }: { children: React.ReactNode }) => {
12  const auth = useAuth()
13  const location = useLocation()
14
15  const authenticatedOnPublicPath = auth.active && PUBLIC.includes(location.pathname as Path)
16  const unAuthenticatedOnPrivatePath = !auth.active && PRIVATE.includes(location.pathname as Path)
17
18  if (authenticatedOnPublicPath) return <Navigate to="/" replace />
19  if (unAuthenticatedOnPrivatePath) return <Navigate to="/login" replace />
20
21  return children
22}

Then use that component (<Redirects> ) at the root-level layout src/pages/_app.tsx to wrap the <Outlet> component:

1// src/pages/_app.tsx
2
3import { Outlet } from 'react-router'
4
5import { Redirects } from '../config/redirects'
6
7export default function App() {
8  return (
9    <section>
10      <header>
11        <nav>...</nav>
12      </header>
13
14      <main>
15        <Redirects>
16          <Outlet />
17        </Redirects>
18      </main>
19    </section>
20  )
21}

You can find a full example of this approach at Render template

You can use the exported routes object to customize the router or to use hash/memory routers:

1import { createRoot } from 'react-dom/client'
2import { RouterProvider, createHashRouter } from 'react-router'
3import { routes } from '@generouted/react-router'
4
5const router = createHashRouter(routes)
6const Routes = () => <RouterProvider router={router} />
7
8createRoot(document.getElementById('root')!).render(<Routes />)