> 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: ,
},
{
path: '/admins',
element: ,
children: [{ path: '/admin', element: }],
},
{
path: '/users',
element: ,
children: [{ path: '/user', element: }],
},
{
path: '*',
element: ,
},
];
`

Dynamic routing

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

Navigation and redirecting

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

Protected routes

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

Nested routing

`javascript
{
path: '/users',
element: ,
children: [
{
path: '/:id',
element: ,
},
],
}
`

Usage

Here's an example of basic usage

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

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

return ;
}
`

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 ;
}
`

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

Yousuf Kalim yousufkalim@outlook.com https://yousufkalim.com

Authored and maintained by Yousuf Kalim.

> GitHub @yousufkalim · LinkedIn @yousufkalim

License

MIT