Apa itu Dynamic Routing, Private Routing, dan Nested Routing?

1. Dynamic Routing: Mengacu pada pembuatan rute yang dapat menangani parameter dinamis di URL. Ini berguna ketika Anda perlu menampilkan konten yang bergantung pada parameter URL, seperti ID atau slug.

2. Private Routing: Digunakan untuk melindungi rute sehingga hanya pengguna yang terautentikasi yang dapat mengaksesnya. Ini biasanya melibatkan pemeriksaan status autentikasi dan mengarahkan pengguna yang tidak terautentikasi ke halaman login atau halaman lain.

3. Nested Routing: Mengacu pada pembuatan rute di dalam rute lain. Ini memungkinkan Anda memiliki rute yang lebih spesifik di bawah rute utama, sering kali untuk mengatur struktur hierarki tampilan.

Contoh Implementasi

Berikut adalah contoh implementasi untuk masing-masing konsep dengan melanjutkan kode dari contoh sebelumnya.

1. Dynamic Routing

Menambahkan rute dinamis untuk menampilkan detail item berdasarkan ID.

src/pages/ItemDetailPage.js:

import React from 'react';
import { useParams } from 'react-router-dom';

function ItemDetailPage() {
  const { id } = useParams();
  
  return <h1>Item Detail for Item ID: {id}</h1>;
}

export default ItemDetailPage;

src/App.js:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import ItemDetailPage from './pages/ItemDetailPage';
import Navigation from './components/Navigation';

function App() {
  return (
    <div>
      <Navigation />
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
        <Route path="/item/:id" component={ItemDetailPage} /> {/* Dynamic Route */}
      </Switch>
    </div>
  );
}

export default App;

2. Private Routing

Menambahkan routing yang hanya dapat diakses jika pengguna terautentikasi.

src/components/PrivateRoute.js:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = false; // Gantilah dengan logika autentikasi Anda

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

export default PrivateRoute;

src/App.js:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import ItemDetailPage from './pages/ItemDetailPage';
import LoginPage from './pages/LoginPage'; // Halaman login
import Navigation from './components/Navigation';
import PrivateRoute from './components/PrivateRoute'; // PrivateRoute

function App() {
  return (
    <div>
      <Navigation />
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
        <Route path="/item/:id" component={ItemDetailPage} />
        <Route path="/login" component={LoginPage} />
        <PrivateRoute path="/profile" component={ProfilePage} /> {/* Private Route */}
      </Switch>
    </div>
  );
}

export default App;

3. Nested Routing

Menambahkan rute yang bersarang di dalam rute lain.

src/pages/ProfilePage.js:

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';

function ProfilePage() {
  return (
    <div>
      <h1>Profile Page</h1>
      <nav>
        <ul>
          <li><Link to="/profile/overview">Overview</Link></li>
          <li><Link to="/profile/settings">Settings</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/profile/overview" component={Overview} />
        <Route path="/profile/settings" component={Settings} />
      </Switch>
    </div>
  );
}

function Overview() {
  return <h2>Profile Overview</h2>;
}

function Settings() {
  return <h2>Profile Settings</h2>;
}

export default ProfilePage;

src/App.js:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import ItemDetailPage from './pages/ItemDetailPage';
import LoginPage from './pages/LoginPage';
import ProfilePage from './pages/ProfilePage'; // Halaman profil
import Navigation from './components/Navigation';
import PrivateRoute from './components/PrivateRoute'; // PrivateRoute

function App() {
  return (
    <div>
      <Navigation />
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
        <Route path="/item/:id" component={ItemDetailPage} />
        <Route path="/login" component={LoginPage} />
        <PrivateRoute path="/profile" component={ProfilePage} /> {/* Private Route */}
      </Switch>
    </div>
  );
}

export default App;

Penjelasan Kode

1. Dynamic Routing:

   • Menggunakan parameter dinamis :id di URL dan useParams untuk mengakses parameter di komponen.

2. Private Routing:

   • PrivateRoute memeriksa apakah pengguna terautentikasi. Jika tidak, pengguna akan diarahkan ke halaman login.

3. Nested Routing:

   • Menambahkan rute di dalam rute lain menggunakan Switch di dalam ProfilePage untuk menampilkan sub-halaman.

Sumber

• React Router Documentation - Dynamic Routing

• React Router Documentation - Private Routing

• React Router Documentation - Nested Routing

Routing di React dengan React Router memungkinkan Anda mengelola navigasi aplikasi dengan dinamis, menjaga akses dengan private routes, dan mengatur struktur halaman yang bersarang untuk aplikasi yang lebih kompleks. Contoh kode di atas memberikan dasar yang baik untuk memahami dan menerapkan routing dalam aplikasi React Anda.