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.

$3

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

#### Installation

``shell
pnpm add @generouted/react-router react-router
`

#### Setup

`ts
// 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()] })
`

#### Usage

`tsx
// src/main.tsx

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

createRoot(document.getElementById('root')!).render()
`

#### Adding pages

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

`tsx
export default function Home() {
return

Home

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

`shell
pnpm add @generouted/solid-router @solidjs/router
`

#### Setup

`ts
// vite.config.ts

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

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

#### Usage

`tsx
// src/main.tsx

import { render } from 'solid-js/web'
import { Routes } from '@generouted/solid-router'

render(Routes, document.getElementById('root')!)
`

#### Adding pages

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

`tsx
export default function Home() {
return

Home

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

`shell
pnpm add generouted @tanstack/react-location
`

#### Usage

`tsx
// src/main.tsx

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

createRoot(document.getElementById('root')!).render()
`

#### Adding pages

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

`tsx
export default function Home() {
return

Home

`shell
src/pages
├── (auth)
│ ├── _layout.tsx
│ ├── login.tsx
│ └── register.tsx
├── blog
│ ├── _components
│ │ ├── button.tsx
│ │ └── comments.tsx
│ ├── [...all].tsx
│ ├── [slug].tsx
│ ├── _layout.tsx
│ ├── index.tsx
│ └── tags.tsx
├── docs
│ ├── -[lang]
│ │ ├── index.tsx
│ │ └── resources.tsx
│ └── -en
│ └── contributors.tsx
├── +info.tsx
├── 404.tsx
├── _app.tsx
├── _ignored.tsx
├── about.tsx
├── blog.w.o.layout.tsx
└── index.tsx
`

| File | Path | Convention |
| :------------------------------ | :----------------------- | :------------------------------------ |
| (auth)/_layout.tsx | | Pathless Layout group |
| (auth)/login.tsx | /login | Regular route |
| (auth)/register.tsx | /register | Regular route |
| blog/_components/button.tsx | | Ignored route by an ignored directory |
| blog/_components/comments.tsx | | Ignored route by an ignored directory |
| blog/[...all].tsx | /blog/* | Dynamic catch-all route |
| blog/[slug].tsx | /blog/:slug | Dynamic route |
| blog/_layout.tsx | | Layout for /blog routes |
| blog/index.tsx | /blog | Index route |
| blog/tags.tsx | /blog/tags | Regular route |
| docs/-[lang]/index.tsx | /docs/:lang?/index | Optional dynamic route segment |
| docs/-[lang]/resources.tsx | /docs/:lang?/resources | Optional dynamic route segment |
| docs/-en/contributors.tsx | /docs/en?/contributors | Optional static route segment |
| +info.tsx | /info | Modal route |
| 404.tsx | * | Custom 404 _(optional)_ |
| _app.tsx | | Custom app layout _(optional)_ |
| _ignored.tsx | | Ignored route |
| about.tsx | /about | Regular route |
| blog.w.o.layout.tsx | /blog/w/o/layout | Route without /blog layout |
| index.tsx | / | Index route |

`tsx
// src/config/redirects.tsx

import { Navigate, useLocation } from 'react-router'

import { useAuth } from '../context/auth'
import { Path } from '../router'

const PRIVATE: Path[] = ['/logout']
const PUBLIC: Path[] = ['/login']

export const Redirects = ({ children }: { children: React.ReactNode }) => {
const auth = useAuth()
const location = useLocation()

const authenticatedOnPublicPath = auth.active && PUBLIC.includes(location.pathname as Path)
const unAuthenticatedOnPrivatePath = !auth.active && PRIVATE.includes(location.pathname as Path)

if (authenticatedOnPublicPath) return
if (unAuthenticatedOnPrivatePath) return

return children
}
`

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

`tsx
// src/pages/_app.tsx

import { Outlet } from 'react-router'

import { Redirects } from '../config/redirects'

export default function App() {
return (


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

`tsx
import { createRoot } from 'react-dom/client'
import { RouterProvider, createHashRouter } from 'react-router'
import { routes } from '@generouted/react-router'

const router = createHashRouter(routes)
const Routes = () =>

createRoot(document.getElementById('root')!).render()
``