react-smart-routes/README.md

A zero-config file-based routing system for React using the src/pages directory, inspired by Next.js.

# React Smart Routes

📦 A zero-config, file-based routing system for React apps — inspired by Next.js.

Forget writing `<Route />`s manually! Just drop your pages into `src/pages/` and you're done.  
Auto-generates routes with support for dynamic parameters, nested paths, and full React Router integration.

---


## 🚀 Why React Smart Routes?

Manually creating routes in `react-router-dom` can be repetitive. This library solves that by:

✅ Supporting file-based routing (like Next.js)  
✅ Automatically generating route configs from your files  
✅ Handling dynamic routes via `[param].jsx`  
✅ Supporting nested folders and deep linking  
✅ Working seamlessly with `react-router-dom`

---


## 📂 File Structure Example

```
src/
└── pages/
    ├── Home.jsx        --> Route: "/home"
    ├── About.jsx       --> Route: "/about"
    └── blog/
        └── [id].jsx    --> Route: "/blog/:id"
```

---


## 🔧 Installation

Make sure to also install `react-router-dom` in your project, as it's a required peer dependency.

```bash
npm install react-router-dom
npm install react-smart-routes
```

Or with Yarn:

```bash
yarn add react-router-dom
yarn add react-smart-routes
```

---


## ⚡ Usage

### 1. Create your pages

Inside `src/pages`, create your components:

```jsx
// src/pages/Home.jsx
export default function Home() {
  return <h1>Home Page</h1>;
}
```

```jsx
// src/pages/About.jsx
export default function About() {
  return <h1>About Page</h1>;
}
```

---


### 2. Add to your App.jsx

```jsx
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { AutoRouter } from "react-smart-routes";

const App = () => {
  return (
    <BrowserRouter>
      <AutoRouter />
    </BrowserRouter>
  );
};

export default App;
```

---


### 3. Run the CLI to generate routes

```bash
npx react-smart-routes
```

This creates a `src/routes.generated.jsx` file used internally by `<AutoRouter />`.

---


## 📜 Dynamic Routing

Use square brackets for dynamic segments:

```
src/pages/user/[id].jsx  --> Route: "/user/:id"
src/pages/post/[slug].jsx --> Route: "/post/:slug"
```

You can access the parameter via `useParams()` inside your component.

---


## 🔗 Add Link Navigation

```jsx
import { Link } from "react-router-dom";

<Link to="/about">Go to About</Link>
<Link to="/user/123">Visit Profile</Link>
```

---


## 🧠 How It Works

- Scans `src/pages/` for `.jsx` files
- Converts filenames into paths
- Generates `src/routes.generated.jsx`
- `<AutoRouter />` loads and renders these using React Router

---


## 🛠️ Development

To build and test locally:

```bash
git clone https://github.com/Chaudhary-Saumya/react-auto-routes.git
cd react-auto-routes
npm install
npm run build
npm link
```

To generate routes during development:

```bash
npm run generate
```

---


## 📁 Project Structure

| Folder       | Purpose                        |
|--------------|--------------------------------|
| `src/`       | Main source code               |
| `cli/`       | CLI tool to auto-generate routes |
| `routes.generated.jsx` | Auto-generated route list |

---


## 📜 License

MIT License

```
MIT License

Copyright (c) 2025 Sumit Chaudhary

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction...
```

---


✨ Made with ❤️ by **Sumit Chaudhary**