Generated file-based routes for Vite

• 📁 Client-side file-based routing
• ⚡ Powered by Vite
• ✨ React support with react-router-dom or @tanstack/router 🧪 or @tanstack/react-location 🚨
• ✨ Solid support with @solidjs/router
• 🔐 Type-safe navigation
• 🚀 Type-safe global modals
• 💤 Route-based code-splitting and lazy-loading
• 📄 Route-based data loaders and actions
• 💣 Route-based error boundary
• 📂 Nested layouts
• 🫙 Pathless layout groups
• ❓ Optional static and dynamic routes
• 💭 Ignored routes per file or directory

• ⚡ Visit generouted's interactive playground via StackBlitz
• 🧩 Explore file-based routing patterns and conventions
• 🔎 Visualize the routes layouts and the resolved routes paths
• 📝 Update src/pages/ files and see your changes reflecting

pnpm add @generouted/react-router react-router-dom

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

// src/main.tsx

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

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

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

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

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

// src/main.tsx

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

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

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

pnpm add generouted @tanstack/react-location

// src/main.tsx

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

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

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

• Routes declaration at src/pages
• Supports .tsx or .jsx extensions
• Optional src/pages/_app.tsx for an app level layout
• Optional src/pages/404.tsx for a custom not-found page

• src/pages/index.tsx → /
• src/pages/posts/index.tsx → /posts

• src/pages/posts/2022/index.tsx → /posts/2022
• src/pages/posts/2022/resolutions.tsx → /posts/2022/resolutions

• src/pages/posts/[slug].tsx → /posts/:slug
• src/pages/posts/[slug]/tags.tsx → /posts/:slug/tags
• src/pages/posts/[...all].tsx → /posts/*

• By defining _layout.tsx in any nested directory → src/pages/posts/_layout.tsx
• Requires using an <Outlet /> component to render layout children
• All the files within the src/pages/posts/ directory in this case, will be wrapped with that layout

• Route file should be outside of the nested layout directory
• Include dots . between the segments to be converted to forward slashes
• src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout

• Similar to nested layouts for layout definition
• By wrapping the parent directory with parentheses ()
• src/pages/(auth)/_layout.tsx
• src/pages/(auth)/login.tsx → /login
• Layout parent directory name is not included in the routes paths

• By prefixing the file name with a plus sign + (thinking the modal is an extra route overlaying the current route)
• Modals navigation available via the useModals() hook
• src/pages/+info.tsx → /info
• src/pages/+checkout/+details.tsx → /checkout/details
• src/pages/+checkout/+payment.tsx → /checkout/payment

• By prefixing a route segment with a minus sign - (thinking the segment can be subtracted or removed from the route path)
• src/pages/-en/about.tsx → /en?/about → /en/about, /about
• src/pages/-[lang]/about.tsx → /:lang?/about → /en/about, /fr/about, /about

• Any directory or file starts with an underscore _ will be ignored
• src/pages/_ignored.tsx
• src/pages/posts/_components/button.tsx
• src/pages/posts/_components/link.tsx

• Required page component export default Component() {...}
• Optional page loader function export const Loader = () => {...}
• Optional page action function export const Action = () => {...}
• Optional error boundary component export const Catch = () => {...}

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

Via @generouted/react-router or @generouted/solid-router

• <Routes /> — file-based routing component to be render in the app entry
• <Modals /> — optional file-based modals component to be render in the _app.tsx layout
• routes — file-based routes tree/object used by default at <Routes /> component

Via @generouted/react-router/lazy or @generouted/solid-router/lazy

• Used instead of @generouted/react-router or @generouted/solid-router to enable lazy-loading
• Make sure to replace all imports to lazy imports — namely at app entry and src/pages/_app.tsx
• Provides the same <Routes />, <Modals /> and routes exports

Via @generouted/react-router/plugin or @generouted/solid-router/plugin

• Vite plugin for type generation and initializing type-safe components/hooks/utils
• Generates src/router.ts file
• Exports type-safe <Link>, <Navigate>, useModals(), useNavigate(), useParams(), redirect(), etc.
• Check out @generouted/react-router docs or @generouted/solid-router docs for more details

Via @generouted/react-router/core or @generouted/solid-router/core

• Available for customization, however it's recommended to use the available integrations directory via the <Routes/> component
• Check out the custom integration example

MIT