Breaking News: Grepper is joining You.com. Read the official announcement!

how to protect routes in react router v6

Mr. Copy Paster answered on June 8, 2022 Popularity 7/10 Helpfulness 6/10

answer how to protect routes in react router v6

how to protect routes in react router v6

Comment

/*
|==================================================
| METHOD 1 -- 
|==================================================
*/

//======= ProtectedRoute.js File =========
import React from "react";
import { Navigate } from "react-router-dom";

function ProtectedRoute({ children }) {

    const isLogin = localStorage.getItem("isLogin");
    console.log("Is User Login?", isLogin);

    return (
        isLogin ? children : <Navigate to="/login" />
    );
}

export default ProtectedRoute;


//========== App.js File ===========
<Route path="/admin" element={<AdminMaster />}>
		  
  	// PROTECTED ROUTE
  	<Route
        path="/admin/dashboard"
        element={
            <ProtectedRoute>
            <Dashboard />
            </ProtectedRoute>
        }
	/>
    
    // PUBLIC ROUTES
    <Route path="/admin/profile" element={<Profile />} />
    <Route path="/admin/users" element={<Users />} />
    <Route path="/admin/categories" element={<Categories />} />
    <Route path="/admin/brands" element={<Brands />} />
    <Route path="/admin/products" element={<Products />} />
    <Route path="/admin/orders" element={<Orders />} />
 </Route>

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript react-router routes

Link to this answer
Share Copy Link

Contributed on Jun 08 2022

Mr. Copy Paster

0 Answers Avg Quality 2/10

how to protect routes in react router v6

Contents

More Related Answers

how to protect routes in react router v6

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.