Node Promiscuous Modules

    generouted
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    Generouted · Generated Routes

    generouted on npm


    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

    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

    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


    API

    <Routes />

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


    License

    MIT

    Install

    npm i generouted

    DownloadsWeekly Downloads

    22

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • oedotme