A plugin generates pages for React applications.

📦 Installation

npm install react-generate-pages -D

🦄 Usage

Configuration Vite

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import pages from 'react-generate-pages'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), pages()],
})

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.

import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'

import routes from '~pages'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <RouterProvider router={createBrowserRouter(routes)} />
)

Type

// vite-env.d.ts
/// <reference types="react-generate-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

# 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