Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yousufkalim/react-easy-router
The simplest way to add routing to your React app
https://github.com/yousufkalim/react-easy-router
dynamic-routing nextjs react-router reactjs router routing
Last synced: 5 days ago
JSON representation
The simplest way to add routing to your React app
- Host: GitHub
- URL: https://github.com/yousufkalim/react-easy-router
- Owner: yousufkalim
- License: mit
- Created: 2022-12-29T18:47:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-10T06:28:00.000Z (over 1 year ago)
- Last Synced: 2024-10-24T15:55:54.664Z (14 days ago)
- Topics: dynamic-routing, nextjs, react-router, reactjs, router, routing
- Language: TypeScript
- Homepage:
- Size: 103 KB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOGS.md
- License: LICENSE
Awesome Lists containing this project
README
> 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
- `[email protected]` 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
[email protected]
https://yousufkalim.com
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/)