React Router Dasar — CompileDaily Study

Penjelasan

React sendiri TIDAK punya sistem routing bawaan — untuk aplikasi dengan banyak "halaman" (SPA), library paling umum dipakai adalah react-router-dom. Route didefinisikan lewat komponen <Routes> dan <Route>, navigasi antar halaman tanpa reload lewat komponen <Link>.

Contoh Konsep

// npm install react-router-dom
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Beranda() {
    return <h1>Halaman Beranda</h1>;
}

function Tentang() {
    return <h1>Halaman Tentang</h1>;
}

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">Beranda</Link>
                <Link to="/tentang">Tentang</Link>
            </nav>

            <Routes>
                <Route path="/" element={<Beranda />} />
                <Route path="/tentang" element={<Tentang />} />
            </Routes>
        </BrowserRouter>
    );
}

Praktikum

Buat dua komponen halaman: Kontak dan Layanan. Daftarkan keduanya lewat <Routes>/<Route> pada path /kontak dan /layanan, dan buat <Link> navigasi ke masing-masing di dalam <nav>.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

SELALU pakai komponen <Link to="..."> untuk navigasi internal, JANGAN pakai tag <a href="..."> biasa — <a> memicu RELOAD PENUH halaman (menghilangkan seluruh keuntungan SPA), sedangkan <Link> berpindah halaman tanpa reload lewat JavaScript.