https://github.com/sudeepgumaste/react-protectedroute

React route component that adds auth check functionality to Route component from react-router-dom
https://github.com/sudeepgumaste/react-protectedroute

npm npm-module npm-package protected protected-routes react react-router-dom route router

Last synced: 5 months ago
JSON representation

React route component that adds auth check functionality to Route component from react-router-dom

• Host: GitHub
• URL: https://github.com/sudeepgumaste/react-protectedroute
• Owner: sudeepgumaste
• License: mit
• Created: 2020-04-30T11:57:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T19:47:23.000Z (over 3 years ago)
• Last Synced: 2025-12-15T00:16:13.590Z (6 months ago)
• Topics: npm, npm-module, npm-package, protected, protected-routes, react, react-router-dom, route, router
• Language: JavaScript
• Size: 1.52 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-protected-route-component

[![npm version](https://badge.fury.io/js/react-protected-route-component.svg)](https://badge.fury.io/js/react-protected-route-component)

![NPM](https://img.shields.io/npm/l/react-protected-route-component)

A simple react component that adds route protection functionaliity to Route component from react-router-dom  

## Install

```

  npm install --save react-protected-route-component

  or

  yarn add react-protected-route-component

```

## Importing

```

  import ProtectedRoute from 'react-protected-route-component'

```

## Usage example

```

import { BrowserRouter, Switch, Route } from "react-router-dom";

import ProtectedRoute from "react-protected-route-component";

const Routes = () => {

  return (

    

      

         
UnProtected Route
} exact />


         {

            const token = localStorage.getItem('authToken');

            if(token){

              return true;

            }else{

              return false;

            }

          }}

          component={() => 
Protected Route
}

          exact

        />


      

    

  );

};

export default Routes;

```

## Props (in addition to basic Route props)

- guardFunction

    Function that returns boolean. If returned false, user will be redirected or component is accessable otherwise.




- guardFunctionArgs

    If the guard function requires args, pass the args as an object and use them accordingly.




- redirect Route

    Redirects the user to this route if guardFunction returns false

## Referance

  https://youtu.be/Y0-qdp-XBJg