Latihan 1: React Router Dasar — React

Latihan 1 dari materi React Router Dasar di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bangun navigasi dengan React Router. Kode awal sudah meng-import BrowserRouter, Routes, Route, dan Link dari "react-router-dom", dan sudah punya dua halaman: Home dan About.

Di dalam <BrowserRouter>, buat <nav> berisi dua Link:
- <Link id="home-link" to="/">Home</Link>
- <Link id="about-link" to="/about">About</Link>
Di bawah <nav>, tulis <Routes> dengan dua Route: <Route path="/" element={<Home />} /> dan <Route path="/about" element={<About />} />.

Pratinjau gak punya address bar, jadi BrowserRouter di editor ini menyimpan riwayatnya di memori dan mulai dari /. Selebihnya React Router asli.

Yang dinilai:

Di dalam <nav> ada link #home-link berbunyi Home menuju /, dan #about-link berbunyi About menuju /about.
Saat pertama tampil, #page-title berbunyi persis Home Page.
Sesudah #about-link diklik, #page-title berbunyi About Page; sesudah #home-link diklik lagi, kembali Home Page.
Kodenya memakai <Link dan <Routes> berisi <Route.

Hint

Link mengganti alamat tanpa memuat ulang halaman, dan Routes memilih Route yang path-nya cocok dengan alamat itu. Halaman yang tampil berganti tanpa state buatanmu sendiri.
Di dalam <BrowserRouter>: <nav> dengan dua <Link id="..." to="...">, lalu <Routes> berisi <Route path="/" element={<Home />} /> dan <Route path="/about" element={<About />} />.
<nav><Link id="home-link" to="/">Home</Link><Link id="about-link" to="/about">About</Link></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: React Router Dasar — React

Hint

Memperbarui Aplikasi