Redirect dan Protected Route - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Redirect dan Protected Route?

Saat membangun aplikasi React, kita sering perlu mengatur navigasi agar pengguna tidak bisa mengakses halaman tertentu tanpa izin. Nah, di sinilah Redirect dan Protected Route berperan!

• Redirect: Mengalihkan pengguna dari satu halaman ke halaman lain secara otomatis.
• Protected Route: Mengamankan halaman tertentu agar hanya bisa diakses oleh pengguna yang sudah login.

Mari kita bahas cara implementasinya!

2. Cara Redirect di React

Redirect di React biasanya dilakukan menggunakan useNavigate dari React Router.

Contoh Redirect Otomatis

Misalkan kita ingin mengarahkan pengguna ke halaman login setelah logout:

import { useNavigate } from "react-router-dom";

const Logout = () => {
  const navigate = useNavigate();
  
  const handleLogout = () => {
    // Hapus token atau sesi pengguna
    localStorage.removeItem("token");
    
    // Arahkan ke halaman login
    navigate("/login");
  };

  return <button onClick={handleLogout}>Logout</button>;
};

3. Membuat Protected Route

Agar hanya pengguna yang sudah login bisa mengakses halaman tertentu, kita bisa membuat ProtectedRoute.

Contoh Protected Route

import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  const isAuthenticated = localStorage.getItem("token");
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

Menggunakan Protected Route

Sekarang kita bisa menggunakannya di App.js atau di file routing kita:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import Dashboard from "./Dashboard";
import Login from "./Login";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<ProtectedRoute />}>
          <Route path="/dashboard" element={<Dashboard />} />
        </Route>
      </Routes>
    </Router>
  );
};

4. Kesimpulan

 Redirect digunakan untuk mengarahkan pengguna ke halaman lain.  Protected Route digunakan untuk membatasi akses ke halaman tertentu.  Menggunakan useNavigate untuk navigasi yang lebih fleksibel.  Dengan Protected Route, pengguna yang tidak login tidak bisa mengakses halaman yang seharusnya hanya untuk pengguna terautentikasi.

Dengan memahami konsep ini, kita bisa membangun aplikasi React yang lebih aman dan terstruktur dengan baik!