Navigasi Halaman Dengan React Router DOM

 Pengenalan React Router DOM

react-router-dom adalah library routing untuk aplikasi React berbasis web. Ia memungkinkan kita membuat navigasi antar halaman tanpa perlu me-reload seluruh halaman seperti pada aplikasi tradisional. Dengan react-router-dom, kamu bisa:

• Menentukan rute (Route) dan halaman yang ditampilkan
• Navigasi antar halaman dengan atau
• Melindungi rute (misalnya hanya bisa diakses jika login)
• Membuat layout dan nested routes

- Instal terlebih dahulu lybrary react router DOM: npm install react-router-dom

Berikut contoh sederhana penggunaan react router DOM untuk navigasi pada halaman Single Page Application

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Navbar() {

  const style = { margin: "0px 5px" };

  return (

    <div>

      <h4>Belajar React Router DOM</h4>

      <nav>

        <Link to="/" style={style}>

          Home

        </Link>

        <Link to="/about" style={style}>

          About

        </Link>

        <Link to="/contact" style={style}>

          Contact

        </Link>

      </nav>

    </div>

  );

}

function Home() {

  return (

    <div>

      <h2>Home Page</h2>

      <p>Selamat datang di halaman Home.</p>

    </div>

  );

}

function About() {

  return (

    <div>

      <h2>About Page</h2>

      <p>Ini adalah halaman About.</p>

    </div>

  );

}

function Contact() {

  return (

    <div>

      <h2>Contact Page</h2>

      <p>Hubungi kami di halaman Contact.</p>

    </div>

  );

}

export default function App() {

  return (

    <Router>

      <Navbar />

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="/contact" element={<Contact />} />

      </Routes>

    </Router>

  );

}

Hasilnya akan tampil seperti berikut :

Pada saat di klik Home maka akan menampilkan halaman Home, di klik About akan menampilkan halaman About, dsb.