https://github.com/hunghg255/rsbuild-react-generate-pages
A rsbuild plugin generates pages for React applications.
https://github.com/hunghg255/rsbuild-react-generate-pages
generate-pages react react-router-dom rsbuild
Last synced: 7 months ago
JSON representation
A rsbuild plugin generates pages for React applications.
- Host: GitHub
- URL: https://github.com/hunghg255/rsbuild-react-generate-pages
- Owner: hunghg255
- License: mit
- Created: 2025-04-20T05:09:37.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-20T05:14:17.000Z (7 months ago)
- Last Synced: 2025-04-20T05:22:25.832Z (7 months ago)
- Topics: generate-pages, react, react-router-dom, rsbuild
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-rstack - rsbuild-react-generate-pages - router-dom` configuration. (Plugins / Rsbuild Plugins)
README
A rsbuild plugin generates pages for React applications.
## 📦 Installation
```bash
npm install rsbuild-react-generate-pages -D
```
## 🦄 Usage
### Configuration `rsbuild.config.ts`
```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](https://reactrouter.com/en/main/route/lazy)
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
// 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](https://reactrouter.com/en/main/route/route#layout-routes)
- `[id]` => `:id`
[Dynamic Segments](https://reactrouter.com/en/main/route/route#dynamic-segments)
- `[[id]]` => `:id?`
[Optional Segments](https://reactrouter.com/en/main/route/route#optional-segments)
- `[...slug]` => `*`
[Splats](https://reactrouter.com/en/main/route/route#splats)
- `{task}` => `task?`
[Optional Static Segments](https://reactrouter.com/en/main/route/route#dynamic-segments)
**Example:**
[exmaple](/playground)
```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
```