Generated file-based routes for Vite

I enjoyed working with file-based routing since started using it with Next.js. After trying the same concept with Vite, I started a series of blog posts covering client-side file-based routing with React Router inspired by Next.js. Later, in the last two posts, I replaced React Router with React Location to add more features like data loaders and nested layouts that are inspired by Remix. The final version covered in the blog posts is now published as generouted, see all the available features below.

generouted is only one source code file, with no dependencies or build step. It uses Vite's glob import API to list the modules within src/pages directory to be used as React Location's routes.

• Declarative and universal file-based routing system
• Automatically update routes by adding/removing/renaming files at the src/pages directory
• Can be used with any Vite project
• Easier to migrate when switching from or to Next.js
• Automatic route-based code-splitting and pre-loading
• Route-based data loaders
• Route-based actions

• React with React Router w/ type-safe navigation 🆕
• React with TanStack React Router
• React with TanStack's React Location
• Solid with Solid Router w/ type-safe navigation 🆕

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

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'

const container = document.getElementById('app')!
createRoot(container).render(<Routes />)

🚀 Check more about type-safe navigation and global modals in the plugin docs.

Check out the docs here

pnpm add generouted @tanstack/react-location

// src/main.tsx

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

const container = document.getElementById('app')!
createRoot(container).render(<Routes />)

In case you don't have a Vite project with Solid and TypeScript, check out this getting started guide to start a new project.

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('app')!)

🚀 Check more about type-safe navigation and global modals in the plugin docs.

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

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

See more about generouted routing conventions below.

• File-based routing
• Route-based code-splitting and pre-loading
• Route-based data loaders and actions
• Route-based actions
• Nested layouts

• Next.js inspired
• Files within src/pages directory
• Supports .jsx and .tsx extensions
• Renders page's default export
• Custom app at src/pages/_app.tsx (optional)
• Custom 404 page at src/pages/404.tsx (optional)
• Navigation between routes using the routing library Link or A component

• Includes routes components, data loaders and actions
• Pre-loading is only available for TanStack's React Location

• Remix inspired
• By exporting a named function Loader from a page: export const Loader = async () => ({...})
• React Location's route loaders guide

• Actions are only available for React Router
• By exporting a named function Action from a page: export const Action = async () => ({...})

• Remix inspired
• Adding a layout for a group of routes by naming a file same as their parent directory or using a _layout.tsx file inside of the nested directory
• Supports data loaders
• Requires <Outlet /> component to render its children

• 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/*

Add a layout for all the routes within src/pages/posts directory by adding src/pages/posts.tsx or src/pages/posts/_layout.tsx:

• src/pages/posts.tsx or src/pages/posts/_layout.tsx
  • src/pages/posts/index.tsx → /posts
  • src/pages/posts/2022/index.tsx → /posts/2022
  • src/pages/posts/[slug].tsx → /posts/:slug

Add a file outside of the directory with a nested layout, then name the file by adding a dot between each segment, it will be converted to forward slashes:

• src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout

By wrapping a directory name with (): src/pages/(app)/...

src/pages/
├── (app)/
│   ├── _layout.tsx
│   ├── dashboard.tsx      →  /dashboard      wrapped by (app)/_layout.tsx
│   └── item.tsx           →  /item           wrapped by (app)/_layout.tsx
├── (marketing)/
│   ├── _layout.tsx
│   ├── about.tsx          →  /about          wrapped by (marketing)/_layout.tsx
│   └── testimonials.tsx   →  /testimonials   wrapped by (marketing)/_layout.tsx
└── admin/
    ├── _layout.tsx
    └── index.tsx          →  /admin          wrapped by admin/_layout.tsx

By prefixing a minus sign - to a segment; meaning this segment can be subtracted/removed from route url:

• src/pages/-some/thing.tsx → /some?/thing
• src/pages/-[param]/another.tsx → /:param?/another

React Router v6.5.0+ supports regular and dynamic optional route segments:

src/pages/-en/about.tsx  →  /en?/about            /en/about and /about
src/pages/-[lang]/about.tsx  →  /:lang?/about     /en/about, /fr/about, /about

However other integration might only support optional dynamic segments:

src/pages/-[lang]/about.tsx  →  /:lang?/about     /en/about, /fr/about, /about

Any directory or a file starts with _ will be ignored

• src/pages/_ignored.tsx
• src/pages/posts/_components/button.tsx
• src/pages/posts/_components/link.tsx

<Routes /> component accepts all React Location's RouterProps except children, location and routes props.

No available props.

No available props.

• Basic
• Nested layouts
• w/ type-safe navigation plugin 🆕

• Basic

• Basic
• Data loaders
• Modals
• Nested layouts

• w/ type-safe navigation plugin 🆕

MIT