React-autoroute NPM

React Autoroute

NextJS/RemixJS/SvelteKit inspired auto routing based on filesystem layout using Vite glob imports. Currently supports React Router only. TanStack Router support will be added later when reaching a more mature phase.

npm

Demo

Feature Overview

Auto glob matching of routes/** (NextJS uses pages/** which is not a good match to layout nesting though)
Component centric route file names: routes/settings/PrivacySettings.js => /settings/privacy-settings
Index Routes e.g. routes/blog/Index.js → /blog or alternatively routes/blog/Blog.js => /blog.
Layout Nesting like in RemixJS, not actually nested routes like in NextJS.
Dynamic route segments routes/blog/[slug].js → /blog/:slug (/blog/hello-world)
404 handling by adding a 404.tsx file at any location.

File Name Conventions

Files exporting React components are using camelCase and start with a uppercase letter: UserSettings.tsx
Index pages are either named Index.js or are using the parents name e.g. settings/Settings.js

Usage

Example:

/// <reference types="vite/client" />

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { createRoutes, modulesToLazyRouteObjects } from 'react-autoroute'

const routes = createRoutes(
  modulesToLazyRouteObjects(
    import.meta.glob<ReactRouterRouteModule>(['/src/routes/**/[\\w$[]*.{jsx,tsx}']),
    '/src/routes/'
  )
)
const router = createBrowserRouter(routes)

function App() {
  return <RouterProvider router={router} />
}

Note: You might wonder: The actual glob import feature of Vite cannot be implemented in the library-space because of unwanted side-effects (e.g. the library creates dependencies to the actual application using it) and produces problems in combination with lazy loading of components/routes.