yousufkalimWe 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.0or later must be installed in your project- Application must be wrapped in a
BrowserRoutercomponent
Installation
Install react-easy-router with npm/yarn
npm install react-easy-router // npm
yarn add react-easy-router // yarnExamples
Routes array
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
{
path: '/users/:id',
element: <User />,
}Navigation and redirecting
{
path: '/home',
navigate: '/blog',
}Protected routes
{
path: '/admin',
element: <Admin />,
protected: true,
roles: ["admin", 'manager'], // Optional: Role specific screen
failureRedirect: '/admin/login', // Optional: Default is '/'
}Nested routing
{
path: '/users',
element: <Users />,
children: [
{
path: '/:id',
element: <User />,
},
],
}Usage
Here's an example of basic usage
// src/App.js
import Router from 'react-easy-router';
function App() {
const routes = [...routes];
return <Router routes={routes} />;
}Protect with authentication function
// 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
|
Yousuf Kalim yousufkalim@outlook.com https://yousufkalim.com |
GitHub @yousufkalim · LinkedIn @yousufkalim