File-system based routing for React Router, inspired by Next.js App Router
npm install rrgeniusFile-system based routing for React Router, inspired by Next.js App Router


- β
File-system routing - Create routes based on your file structure
- β
Nested layouts - Automatic layout inheritance with
- β
Dynamic routes - Support for [id] and [...slug] parameters
- β
Loading states - Built-in loading states per route
- β
Error boundaries - Error handling for each route
- β
404 pages - Automatic not found pages
- β
Layout groups - Use (group) folders for shared layouts
- β
Zero configuration - Works out of the box with Vite
- β
TypeScript support - Full TypeScript support
- β
Code splitting - Automatic lazy loading
``bashnpm
npx rrgenius init
$3
`bash
npm
npm install rrgeniusyarn
yarn add rrgeniuspnpm
pnpm add rrgeniusbun
bun add rrgenius
`β‘ Quick Start
$3
`typescript
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileSystemRouter } from "rrgenius/vite-plugin";export default defineConfig({
plugins: [
react(),
fileSystemRouter({
pagesDir: "./src/pages",
}),
],
});
`$3
`typescript
// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router";
import { createFileSystemRouter } from "rrgenius";const router = createFileSystemRouter();
createRoot(document.getElementById("root")!).render(
);
`$3
`
src/pages/
βββ layout.tsx # Root layout
βββ page.tsx # Home page (/)
βββ produtos/
β βββ layout.tsx # Products layout
β βββ page.tsx # /produtos
β βββ novo/
β β βββ page.tsx # /produtos/novo
β βββ [id]/
β βββ page.tsx # /produtos/123
β βββ editar/
β βββ page.tsx # /produtos/123/editar
βββ (admin)/ # Layout group
βββ layout.tsx # Admin layout
βββ dashboard/
βββ page.tsx # /dashboard
`π― Examples
$3
`tsx
// src/pages/produtos/page.tsx
export default function ProdutosPage() {
return (
Lista de Produtos
Esta Γ© a pΓ‘gina de produtos
);
}
`$3
`tsx
// src/pages/produtos/[id]/page.tsx
import { useParams } from "react-router";export default function ProdutoPage() {
const { id } = useParams();
return (
Produto {id}
Detalhes do produto {id}
);
}
`$3
`tsx
// src/pages/layout.tsx
import { Outlet } from "react-router";export default function RootLayout() {
return (
Minha AplicaΓ§Γ£o
{/ Pages render here /}
);
}
`π Documentation
- User Guide - Complete usage guide
- Technical Documentation - Deep technical details
π οΈ API Reference
$3
Creates a React Router instance from your file structure.
`typescript
import { createFileSystemRouter } from "rrgenius";const router = createFileSystemRouter();
`$3
Vite plugin for file-system routing.
`typescript
import { fileSystemRouter } from "rrgenius/vite-plugin";export default defineConfig({
plugins: [
fileSystemRouter({
pagesDir: "./src/pages", // Default: './src/pages'
debug: false, // Default: false
}),
],
});
`π¨ File Conventions
| File | Purpose | Example |
| ------------- | -------------- | --------------- |
|
page.tsx | Route page | /produtos |
| layout.tsx | Shared layout | Header/Footer |
| loading.tsx | Loading state | Loading spinner |
| error.tsx | Error boundary | Error page |
| 404.tsx | Not found page | 404 page |π§ Advanced Usage
$3
Use parentheses for layout groups that don't appear in the URL:
`
src/pages/
βββ (admin)/ # Admin group (not in URL)
β βββ layout.tsx # Admin layout
β βββ dashboard/
β β βββ page.tsx # /dashboard (not /admin/dashboard)
β βββ usuarios/
β βββ page.tsx # /usuarios (not /admin/usuarios)
βββ (public)/ # Public group
βββ layout.tsx # Public layout
βββ sobre/
βββ page.tsx # /sobre
`$3
`
src/pages/
βββ produtos/
β βββ [id]/
β β βββ page.tsx # /produtos/123
β β βββ [action]/
β β βββ page.tsx # /produtos/123/editar
β βββ [...slug]/
β βββ page.tsx # /produtos/a/b/c (catch-all)
`π€ Contributing
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Next.js App Router
- Built on top of React Router
- Powered by Vite
---
Made with β€οΈ by the React Route Genius community