React57 / 78

Route, Link, dan NavLink

React Router menggunakan <Link to="/path"> untuk berpindah halaman SPA tanpa refresh, dan <NavLink> untuk memberikan class active otomatis pada menu.

👀 Contoh dulu

<NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>About</NavLink>

Hasilnya: Menu About otomatis bercahaya/aktif saat URL berada di /about.

💡 Gunakan NavLink untuk pembuatan komponen Navbar utama.

📝 Sekarang giliranmu

Gunakan komponen <Link> dari React Router untuk membuat tautan ke rute /profil dengan teks tampilan 'Profil'.

Preview