A Vite plugin to generate pages for React
npm install react-generate-pages
A plugin generates pages for React applications.
``bash`
npm install react-generate-pages -D
`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()],
})
`
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
///
- layout.{tsx,jsx,ts,js} => layout pagepage.{tsx,jsx,ts,js}
- => index page404.{tsx,jsx,ts,js}
- => not found page_lib
- => private folder (underscore prefix)(layout)
- =>[id]
Layout Routes
- => :id[[id]]
Dynamic Segments
- => :id?[...slug]
Optional Segments
- => *{task}
Splats
- => task?
Optional Static Segments
Example:
`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