Latihan 2: React Router Dasar — React

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

Pindah halaman dari kode dengan useNavigate. Kode awal sudah punya komponen Alamat yang menampilkan alamat aktif di <p id="path">, komponen Tombol dengan #btn-home dan #btn-about, dan <div id="page"> yang masih kosong.

Di Tombol, ambil fungsi pindah halaman: const navigate = useNavigate().
Pasang onClick di kedua tombol: #btn-home memanggil navigate("/"), dan #btn-about memanggil navigate("/about").
Di dalam <div id="page">, tulis <Routes> dengan dua Route: "/" menampilkan Halaman Home, dan "/about" menampilkan Halaman About. Misalnya <Route path="/" element={<span>Halaman Home</span>} />.

Yang dinilai:

Saat pertama tampil, #page berbunyi persis Halaman Home dan #path berbunyi /.
Setelah #btn-about diklik, #page berbunyi Halaman About dan #path jadi /about.
Setelah #btn-home diklik, #page kembali Halaman Home.
Kodenya memanggil useNavigate(.

Hint

Halaman yang tampil ditentukan alamat, bukan state buatanmu. Tombolnya cukup mengganti alamat lewat navigate, lalu Routes memilih isinya.
Di Tombol: const navigate = useNavigate(), lalu onClick={() => navigate("/about")}. Di #page: <Routes> berisi dua <Route path="..." element={...} />.
<button id="btn-about" onClick={() => navigate("/about")}>About</button> dan <Route path="/about" element={<span>Halaman About</span>} />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: React Router Dasar — React

Hint

Memperbarui Aplikasi