> We are the first generation to feel the sting of climate change, and we are the last generation that can do something about it. Save our planet 🪴

# React Easy Router

- Built on top of react-router-dom
- The simplest way to add routing to your React app
- Pass a JS object to the library, and it will handle all the routing

## Prerequisites

- `react-router-dom@6.4.0` or later must be installed in your project
- Application must be wrapped in a `BrowserRouter` component

## Installation

Install react-easy-router with npm/yarn

```bash
  npm install react-easy-router // npm
  yarn add react-easy-router // yarn
```

## Examples

**Routes array**

```javascript
const routes = [
  {
    path: '/',
    navigate: '/login',
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/admins',
    element: <Admins />,
    children: [{ path: '/admin', element: <Admin /> }],
  },
  {
    path: '/users',
    element: <Users />,
    children: [{ path: '/user', element: <User /> }],
  },
  {
    path: '*',
    element: <NotFound />,
  },
];
```

**Dynamic routing**

```javascript
{
  path: '/users/:id',
  element: <User />,
}
```

**Navigation and redirecting**

```javascript
{
  path: '/home',
  navigate: '/blog',
}
```

**Protected routes**

```javascript
{
  path: '/admin',
  element: <Admin />,
  protected: true,
  roles: ["admin", 'manager'], // Optional: Role specific screen
  failureRedirect: '/admin/login', // Optional: Default is '/'
}
```

**Nested routing**

```javascript
{
  path: '/users',
  element: <Users />,
  children: [
    {
      path: '/:id',
      element: <User />,
    },
  ],
}
```

## Usage

Here's an example of basic usage

```javascript
// src/App.js
import Router from 'react-easy-router';

function App() {
  const routes = [...routes];

  return <Router routes={routes} />;
}
```

Protect with authentication function

```javascript
// src/App.js
import Router from 'react-easy-router';

function App() {
  const routes = [...routes];

  // Function can resolve/reject or return true/false
  const checkAuth = () => {
    const token = localStorage.getItem('token');

    if (token) {
      return { success: true, role: 'admin' };
    } else {
      return false;
    }
  };

  return <Router routes={routes} isAuthenticated={checkAuth} />;
}
```

## Props

**Router**

| Prop            | Type     | Description                                |
| --------------- | -------- | ------------------------------------------ |
| routes          | Array    | Array of routes                            |
| isAuthenticated | Function | Function to check if user is authenticated |
| showLoader      | Boolean  | Option to disable the loading screen       |
| loader          | Gif/Svg  | Custom loader element                      |

## Contributing

- Fork it!
- Create your feature branch: `git checkout -b my-new-feature`
- Commit your changes: `git commit -am 'Add some feature'`
- Push to the branch: `git push origin my-new-feature`
- Submit a pull request :D

## Author

<table>
  <tr>
    <td>
      <img src="https://i.imgur.com/ALrn4wU.jpg" width="100">
    </td>
    <td>
      Yousuf Kalim<br />
      <a href="mailto:yousufkalim@outlook.com">yousufkalim@outlook.com</a><br />
      <a href="https://yousufkalim.com">https://yousufkalim.com</a>
    </td>
  </tr>
</table>
Authored and maintained by Yousuf Kalim.

> GitHub [@yousufkalim](https://github.com/yousufkalim) · LinkedIn [@yousufkalim](https://www.linkedin.com/in/yousufkalim/)

## License

[MIT](https://choosealicense.com/licenses/mit/)