hunghg255/rsbuild-react-generate-pages

A rsbuild plugin generates pages for React applications.

A rsbuild plugin generates pages for React applications.

📦 Installation

npm install rsbuild-react-generate-pages -D

🦄 Usage

Configuration rsbuild.config.ts

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginReactGeneratePages} from 'rsbuild-react-generate-pages';

export default defineConfig({
  plugins: [pluginReactGeneratePages(), pluginReact()],
});

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

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