Generouted

Generated file-based routes for React Location and Vite

Motivation

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.

How

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.

Why

• 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

Features

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

File-based routing

• Next.js inspired
• Supports .tsx extensions
• Custom app at src/pages/_app.tsx (optional)
• Custom 404 page at src/pages/404.tsx (optional)
• Navigation between routes using React Location's <Link /> component

Conventions

Index routes

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

Nested routes

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

Dynamic routes

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

Route-based code-splitting and pre-loading

• Includes routes components and data loaders

Route-based data loaders

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

Nested layouts

• Remix inspired
• Adding a layout for a group of routes by naming a file same as their parent directory
• Supports data loaders
• Requires React Location's <Outlet /> component to render its children

Conventions

Enable for all directory routes

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

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

Exclude a route - URL nesting without layout nesting

Replace regular file name with directory nesting by adding dots, it will be converted to forward slashes:

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

Getting started

If you have an existing Vite project setup with React you can skip this section and go to the installation section.

Otherwise you can scaffold a new Vite project with React and TypeScript:

npm create vite@latest react-file-based-routing -- --template react-ts   # npm 7+

Installation

npm install generouted react-location

Usage

Render the <Routes /> component from generouted at the app entry (you'd mostly wrap it with other providers/components):

// src/main.tsx

import { render } from 'react-dom'
import { Routes } from 'generouted'

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

Adding pages

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

Examples

• Basic
• Data loaders
• Nested layouts

API

<Routes />

That's the only export at the moment. Could add some customization options in the future.

License

MIT