File system routing for React applications base react-router, vite

pnpm add @fourcels/vite-plugin-react-pages react-router react-router-dom

Add to your vite.config.js:

import pages from "@fourcels/vite-plugin-react-pages";

export default {
  plugins: [
    // ...
    pages(),
  ],
};

By default a page is a React Router lazy component exported from a .tsx, .jsx, .ts, .js file in the src/pages directory.

You can access the generated routes by importing the ~pages module in your application.

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import routes from "~pages";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={createBrowserRouter(routes)} />
  </React.StrictMode>,
);

Type

// vite-env.d.ts
/// <reference types="@fourcels/vite-plugin-react-pages/client" />

• layout.{tsx,jsx,ts,js} => layout page
• page.{tsx,jsx,ts,js} => index page
• 404.{tsx,jsx,ts,js} => not found page
• _lib => private folder (underscore prefix)
• (layout) => Layout Routes
• [id] => :id Dynamic Segments
• [[id]] => :id? Optional Segments
• [...slug] => * Splats
• {task} => task? Optional Static Segments

Example:

exmaple

# folder structure
src/pages/
├── (dashboard)
│   ├── [...slug]
│   │   └── page.tsx
│   ├── posts
│   │   ├── [id]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── about
│   └── [[lang]]
│       └── page.tsx
├── 404.tsx
├── layout.tsx
└── page.tsx