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
npm install react-easy-router // npm
yarn add react-easy-router // yarn
Examples
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'],
failureRedirect: '/admin/login',
}
Nested routing
{
path: '/users',
element: <Users />,
children: [
{
path: '/:id',
element: <User />,
},
],
}
Usage
Here's an example of basic usage
import Router from 'react-easy-router';
function App() {
const routes = [...routes];
return <Router routes={routes} />;
}
Protect with authentication function
import Router from 'react-easy-router';
function App() {
const routes = [...routes];
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
Authored and maintained by Yousuf Kalim.
GitHub @yousufkalim · LinkedIn @yousufkalim
License
MIT