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 <Outlet />
• ✅ 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

Option 1: Initialize a new project

# npm
npx rrgenius init

# yarn
yarn dlx rrgenius init

# pnpm
pnpm dlx rrgenius init

# bun
bunx rrgenius init

Option 2: Install manually

# npm
npm install rrgenius

# yarn
yarn add rrgenius

# pnpm
pnpm add rrgenius

# bun
bun add rrgenius

⚡ Quick Start

1. Configure Vite

// 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",
    }),
  ],
});

2. Create Router

// 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(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

3. Create Pages

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

Basic Page

// src/pages/produtos/page.tsx
export default function ProdutosPage() {
  return (
    <div>
      <h1>Lista de Produtos</h1>
      <p>Esta é a página de produtos</p>
    </div>
  );
}

Dynamic Route

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

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

  return (
    <div>
      <h1>Produto {id}</h1>
      <p>Detalhes do produto {id}</p>
    </div>
  );
}

Layout with Outlet

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

export default function RootLayout() {
  return (
    <div>
      <header>
        <h1>Minha Aplicação</h1>
        <nav>
          <a href="/">Home</a>
          <a href="/produtos">Produtos</a>
        </nav>
      </header>

      <main>
        <Outlet /> {/* Pages render here */}
      </main>

      <footer>
        <p>&copy; 2024 Minha Aplicação</p>
      </footer>
    </div>
  );
}

📚 Documentation

• User Guide - Complete usage guide
• Technical Documentation - Deep technical details

🛠️ API Reference

createFileSystemRouter()

Creates a React Router instance from your file structure.

import { createFileSystemRouter } from "rrgenius";

const router = createFileSystemRouter();

fileSystemRouter(options)

Vite plugin for file-system routing.

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

Layout Groups

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

Dynamic Routes

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