dkimura / generouted

Generated file-based routes for Vite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Generouted Β· Generated Routes

generouted on npm


Generouted

Generated file-based routes for 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


Framework support

Getting started

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

React Router w/ type-safe navigation πŸ†•

Installation

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

Setup

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

// 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.

TanStack React Router

Check out the docs here

React Location

Installation

pnpm add generouted @tanstack/react-location

Usage

// src/main.tsx

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

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

Solid Router w/ type-safe navigation πŸ†•

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

Installation

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

Setup

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

// 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.

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

See more about generouted routing conventions below.


Features

File-based routing

  • 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

Route-based code-splitting and pre-loading

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

Route-based data loaders

Route-based actions

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

Nested layouts

  • 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

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

Nested layouts

Enable for all directory routes

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

Exclude a route - URL nesting without layout nesting

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

Pathless layout groups πŸ†•

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

Optional route segments πŸ†•

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

Ignored routes - co-locating non-pages files inside the pages directory

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

API

React Location

<Routes />

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

React Router

<Routes />

No available props.

Solid Router

<Routes />

No available props.


Examples

React Router

TanStack React Router

TanStack React Location

Solid Router


License

MIT

About

Generated file-based routes for Vite

License:MIT License


Languages

Language:TypeScript 98.4%Language:JavaScript 1.1%Language:Shell 0.4%