A plugin generates pages for React applications.

📦 Installation

``bash
npm install react-generate-pages -D
`

🦄 Usage

$3

`ts
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.

`tsx
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(

)
`

Type

`ts
// vite-env.d.ts
///
`

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

`bash


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