“Cara Melindungi Rute di React Router V6” Kode Jawaban

Cara Melindungi Rute di React Router V6

/*
|==================================================
| 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>