https://github.com/KAROTT7/vite-plugin-react-views
Create routes automatically based on File System.
https://github.com/KAROTT7/vite-plugin-react-views
Last synced: about 2 months ago
JSON representation
Create routes automatically based on File System.
- Host: GitHub
- URL: https://github.com/KAROTT7/vite-plugin-react-views
- Owner: KAROTT7
- Created: 2022-05-28T07:13:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-10T08:00:09.000Z (about 2 years ago)
- Last Synced: 2024-04-25T16:02:46.529Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 212 KB
- Stars: 21
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-react-views
A vite plugin based on File System for creating routes automatically.
Some rules you need to know:
- Requirement: `react-router-dom@^6.9`
- All files in conventional directory will become routes, except empty files and excluded files.
- For code splitting, all routes will be imported dynamically by [lazy](https://reactrouter.com/en/dev/route/lazy), except layout route in root directory.
- A file starts with a `_` character or wraps by `[]` will be `dynamic route`.
- Every file named `layout` in directory will become layout route.
### Installation
```js
npm install vite-plugin-react-views --save-dev
```
### Usage
```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import router from 'vite-plugin-react-views'
export default defineConfig({
plugins: [react(), router()]
})
// App.jsx
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
// Requirement: import routes
import routes from 'route-views'
const router = createBrowserRouter(routes)
export default function App() {
return (
)
}
```
### Options
- dir: string
default: `'src/pages'`
A directory path for crawling.
- exclude(path): boolean
A file will not become a route if return true.
- sync(path): boolean
A route will be imported synchronously if return true.
- extensions: string[]
default: `['js', 'jsx', 'ts', 'tsx']`
Filename extensions which will be scanned and imported as route elements.
### Typescript
```js
// src/vite-env.d.ts
///
declare module 'route-views' {
const routes: (import('react-router-dom').RouteObject)[];
export default routes;
}
```
### License
MIT