Private Route

# Private Route

Implement Private Route on your React App

React Auth Kit has a PrivateRoute functionality Based on React Router

Import

import {PrivateRoute} from 'react-auth-kit'

Implementation

Add PrivateRoute in your Routes Files inside BrowserRouter or HashRouter

Demo

<BrowserRouter>
    <PrivateRoute component={privateComponent} path={'/privateRoute'} loginPath={'/loginPath'} exact/>
</BrowserRouter>

Full Code

import React from "react"
import {BrowserRouter, Route} from "react-router-dom"
import { PrivateRoute } from 'react-auth-kit'

const Routes = () => {
    return (
        <BrowserRouter>
            <Route component={LoginComponent} path={'/login'} exact/>
            <PrivateRoute component={privateComponent} path={'/privateRoute'} loginPath={'/loginPath'} exact/>
        </BrowserRouter>
    )
}

Props

As PrivateRoute is a derived version of Route from React-Router, that's why the props are same as Route props. Check this link.

Added Prop: loginPath (Require): The fallback path, if the user is unauthorized.

— 🔑 —

React Auth Kit is Apache 2.0 License code