RRGenius 🧠⚡

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


🚀 Features

- ✅ 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

🚀 Quick Start

$3

``bash


npm

npx rrgenius init

yarn

yarn dlx rrgenius init

pnpm

pnpm dlx rrgenius init

bun

bunx rrgenius init
`

$3

`bash


npm

npm install rrgenius

yarn

yarn add rrgenius

pnpm

pnpm add rrgenius

bun

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 (



);
}
`

$3

`tsx
// src/pages/produtos/[id]/page.tsx
import { useParams } from "react-router";

export default function ProdutoPage() {
const { id } = useParams();

return (



);
}
`

$3

`tsx
// src/pages/layout.tsx
import { Outlet } from "react-router";

export default function RootLayout() {
return (



);
}
`

📚 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`)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

- Inspired by Next.js App Router
- Built on top of React Router
- Powered by Vite

---

Made with ❤️ by the React Route Genius community