Tautan Aktif
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 34 dari 47.
Setiap situs dengan bilah navigasi menyorot tautan yang sedang kamu buka. Untuk melakukannya, sebuah komponen harus mengetahui satu hal yang tidak bisa diberitahukan server kepadanya setelahnya: URL mana yang sedang ditampilkan sekarang.
next/navigation memberikannya kepadamu:
'use client';
import { usePathname } from 'next/navigation';
export default function Nav() {
const pathname = usePathname();
// di /about, pathname adalah string '/about'
}Ini adalah hook, jadi aturan yang sudah kamu ketahui berlaku: hook ini hanya berfungsi dalam komponen yang filenya diawali dengan 'use client'. Itulah alasan utama bilah navigasi biasanya menjadi salah satu dari sedikit komponen client dalam aplikasi yang selebihnya dirender di server: komponen ini harus dijalankan ulang setiap kali rute berubah.
Dari sana, ini adalah perbandingan biasa:
<Link
href="/menu"
className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
Menu
</Link>Perhatikan lokasi nav: di dalam layout. Nav dirender sekali dan tetap ada setiap kali navigasi, jadi perubahan pathname yang membuatnya dirender ulang, bukan dipasang ulang.
Tantangan
MudahBilah navigasi berfungsi, tetapi tidak menunjukkan halaman yang sedang kamu buka. Perbaiki itu di components/Nav.jsx.
- Panggil
usePathname()dan simpan hasilnya dipathname. - Berikan className
"nav-link active"pada setiap tautan saathref-nya cocok denganpathname, dan"nav-link"jika tidak.
Tautan Home mengarah ke /, sedangkan tautan Menu mengarah ke /menu.
Coba sendiri
import './globals.css';
import Nav from '../components/Nav.jsx';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
