react-easy-router

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'], // 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 [e-mail] https://yousufkalim.com

Authored and maintained by Yousuf Kalim.

GitHub @yousufkalim · LinkedIn @yousufkalim

License

MIT