vite-plugin-react-pages

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

Getting Started

Install

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

Vite config

Add to your vite.config.js:

1import pages from "@fourcels/vite-plugin-react-pages";
2
3export default {
4  plugins: [
5    // ...
6    pages(),
7  ],
8};

Overview

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.

1import React from "react";
2import ReactDOM from "react-dom/client";
3import { createBrowserRouter, RouterProvider } from "react-router-dom";
4
5import routes from "~pages";
6
7ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
8  <React.StrictMode>
9    <RouterProvider router={createBrowserRouter(routes)} />
10  </React.StrictMode>,
11);

Type

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

Route Style

• 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

1# folder structure
2src/pages/
3├── (dashboard)
4│   ├── [...slug]
5│   │   └── page.tsx
6│   ├── posts
7│   │   ├── [id]
8│   │   │   └── page.tsx
9│   │   └── page.tsx
10│   ├── layout.tsx
11│   └── page.tsx
12├── about
13│   └── [[lang]]
14│       └── page.tsx
15├── 404.tsx
16├── layout.tsx
17└── page.tsx