⚛️ Amazing Router React

The official React adapter for Amazing Router. Seamlessly integrates file-system based routing into your React applications, powered by React Router v7 under the hood.

✨ Why Amazing Router React?

Bring the power of Next.js-style file-system routing to your vanilla React SPA or Vite project.

• 📁 Zero Config Routing: Your directory structure dictates your routes.
• ⚡ React Router v7: Built on top of the industry standard router for React.
• 🧩 Layouts & Groups: Support for nested layout.tsx, page.tsx, and route groups.
• 🔌 Ready to Use: Just drop in the provider and let it handle the rest.

📦 Installation

Install the React adapter alongside the core engine and React Router:

npm install @amazing-router/react @amazing-router/core react-router
# or
yarn add @amazing-router/react @amazing-router/core react-router
# or
pnpm add @amazing-router/react @amazing-router/core react-router

🚀 Quick Start

1. Setup the Core Plugin: Follow the Amazing Router Core instructions to add the plugin to your Vite/Webpack config and initialize your project.

2. Mount the Provider: In your main entry file (e.g., src/main.tsx or src/index.tsx), replace your root app component with the <AmazingProvider />.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AmazingProvider } from "@amazing-router/react";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <AmazingProvider />
  </StrictMode>
);

⚙️ How It Works

The @amazing-router/react adapter automatically reads the route tree generated by @amazing-router/core and dynamically translates it into a native react-router configuration object.

• page.tsx files are mapped to React Router route elements.
• layout.tsx files act as layout wrappers utilizing React Router's <Outlet />.
• Routes are dynamically processed to support lazy-loading and optimal chunking.

🪝 Re-exports

For maximum convenience, @amazing-router/react re-exports everything from react-router. You can import all your routing utilities directly from the adapter:

import { Link, useNavigate, Outlet } from "@amazing-router/react";

export default function CustomLayout() {
  const navigate = useNavigate();
  
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

📄 License

MIT © AdelGann