![GitHub Workflow Status]( ![npm](

Downloads in past


530.6.2a year agoa year agoMinified + gzip package size for vite-plugin-next-react-router in KB


GitHub Workflow Status npm
A Next.js style file system based routing plugin for vite, inspired by vite-plugin-pages. Requires react-router v6.


  1. Install with yarn:

yarn add vite-plugin-next-react-router -D

or with pnpm
pnpm add vite-plugin-next-react-router -D

  1. Add to your vite.config.js

import { reactRouterPlugin } from 'vite-plugin-next-react-router';

export default defineConfig({
  plugins: [

Pass config options like this:
export default defineConfig({
  plugins: [

    // this is also the default config
      async: true,
      pageDir: 'src/pages',
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      output: './src/routes.tsx',

  1. This plugin will scan you pages folder then automatically generate a routes objects and write to output so you can import them from there.

import { BrowserRouter, useRoutes } from 'react-router-dom';
import { routes } from './routes'; // or use Vite's alias to simplify import path for nested components

function App() {
  const element = useRoutes(routes);
  return element;

    <App />

  1. For some meta info you want to add to the pages, you can export a meta object in you page component, and read them from pages objects like below:

// page component
export default PageA() {

export const meta = {
  title: 'This is Page A',
  sort: 0

// Sider component
import { pages } from './routes';

function Sider() {
  const menuItems = pages
    .sort(/* sort it according to meta.sort */)\
    .map(/* map them to Sider menu items */)

  // render it

It follows Next.js style file system based routing rules and route files named index to the root of the pages directory. You can check their docs here.