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
• ✨ File-based MDX routes with React or Solid, requires @mdx-js/rollup installation and setup
• 🔐 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, .jsx and .mdx file 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 suspense-based pending component export const Pending = () => {...}
• 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
• 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 /> 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

// src/config/redirects.tsx

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

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 <Navigate to="/" replace />
  if (unAuthenticatedOnPrivatePath) return <Navigate to="/login" replace />

  return children
}

// src/pages/_app.tsx

import { Outlet } from 'react-router-dom'

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

export default function App() {
  return (
    <section>
      <header>
        <nav>...</nav>
      </header>

      <main>
        <Redirects>
          <Outlet />
        </Redirects>
      </main>
    </section>
  )
}

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

const router = createHashRouter(routes)
const Routes = () => <RouterProvider router={router} />

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

MIT