Vite-plugin-react-views NPM

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, except layout route in root directory.
you can export 'Component'、'ErrorBoundary'、'loader'、'action', 'handle'、'shouldRevalidate'、'errorElement'、'id' in every route file
A file starts with a _ character or wraps by [] will be dynamic route.
Every file named layout in directory will become layout route.
The file named 404 in root directory will become No Match(404) Route.

Installation

npm install vite-plugin-react-views --save-dev

Usage

// 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 (
    <RouterProvider
      router={router}
    />
  )
}

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

// src/vite-env.d.ts
/// <reference types="vite/client" />

declare module 'route-views' {
  const routes: (import('react-router-dom').RouteObject)[];

  export default routes;
}