unplugin-react-routes

unplugin-react-routes

File-based routing, similar to Next.js App Router. Powered by unplugin.

Install

npm i -D unplugin-react-routes
# or
yarn add -D unplugin-react-routes
# or
pnpm add -D unplugin-react-routes
# or
bun add -D unplugin-react-routes

Vite

// vite.config.ts
import reactRoutes from 'unplugin-react-routes/vite'

export default defineConfig({
  plugins: [
    reactRoutes({
      /* options */
    }),
  ],
})

Setup

Add TypeScript type support.

// vite-env.d.ts
/// <reference types="vite/client" />
/// <reference types="unplugin-react-routes/client" />

If you don't have a .d.ts file, you can add this code to tsconfig.json.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-react-routes/client"]
  }
}

Changes to the entry file

// main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import { createBrowserRouter } from 'react-router'
+import { RouterProvider } from 'react-router/dom'
+import { routes } from 'virtual:react-routes'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
-   <App />
+   <RouterProvider router={createBrowserRouter(routes)} />
  </StrictMode>,
)

Create an app folder under src, move App.tsx to app and rename it to index.tsx, taking care to adjust the relative path of the import statement.

Change export statement.

// index.tsx

// export default App

export const Component = () => {
  /* Code for the `App` component. */
}

Start the development server, if it is already started, restart it.

You should now see what index.tsx presents in your browser.

You can also export these components:

// https://reactrouter.com/start/framework/route-module#errorboundary
export const ErrorBoundary = () => {
  /* code */
}

Routing

The following routes have been implemented

Index Routes

Index routes render into their parent's at their parent's URL (like a default child route).

react-router

Usage: /src/app/_index/index.tsx

import { RouteObject } from 'react-router'

// The generated structure looks like this
export default [
  {
    path: '/',
    children: [
      {
        index: true,
      },
    ],
  },
] satisfies RouteObject[]

Nested Routes

Nesting based on directory paths.

Usage: /src/app/a/b/c/index.tsx

import { RouteObject } from 'react-router'

// The generated structure looks like this
export default [
  {
    path: '/',
    children: [
      {
        path: 'a',
        children: [
          {
            path: 'b',
            children: [
              {
                path: 'c',
              },
            ],
          },
        ],
      },
    ],
  },
] satisfies RouteObject[]

Dynamic Segments/Routes

Using a pair of [] wrappers, the internal name will be used as the name of the property fetched in useParams.

Usage: /src/app/[postId]/index.tsx

import { RouteObject } from 'react-router'

// The generated structure looks like this
export default [
  {
    path: '/',
    children: [
      {
        path: ':postId',
      },
    ],
  },
] satisfies RouteObject[]

Configuration

The following is the default values of the plugin.

reactRoutes({
  // relative paths to the directory to search for pages.
  dir: 'src/app',
  // specify the file name as the routing page file.
  index: 'index.tsx',
})