dynamic-router-plugin-vite

Dynamic router for React.

Installation

Install the package using

npm install dynamic-router-plugin-vite

Setup

First you need to add the plugin to vite like so :

import { defineConfig } from 'vite';
import dynamicRouter from 'dynamic-router-plugin-vite'

export default defineConfig({
  // Your vite config ...

  plugins: [dynamicRouter(config)],
});

Then you need to setup the config

Here's the plugin's configuration options:

const dynamicRouterConfig: {
  excludeFiles?: string[]       // Default: [] | List of files you want to exclude from the dynamic router
  customRoutes?: Routes[]       // Default: [] | Your custom routes (ex: home) see custom routes type
  laravelRouteStart?: string    // Default: "// ### DYNAMIC ROUTES START ###"
  laravelRouteEnd?: string      // Default: "// ### DYNAMIC ROUTES END ###"
  output?: string               // Default: "resources/js/d-router.tsx"
  pagesFolderName?: string      // Default: "pages"
  pagesImportPath?: string      // Default: "resources/js/components"
  pagesFolderLocation?: string  // Default: "@/components/pages"
}

const customRoute: {
  name: string       // Name of the route (ex: 'home')
  path: string       // Path of the route (ex: '/home')
  component: string  // Name of the component assosiated to the route (ex: 'Home')
  importPath: string // Prefix for the import (ex: '@/components')
}

Exemple

Let's say I have a pages folder in resources/js/components/pages, and I import component with @.

dynamicRouter({
  pagesFolderName: 'pages',
  pagesFolderLocation: 'resources/js/components'
  pagesImportPath: '@/components'
})