Etkin Bağlantı (Active Link)

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası. Ders 34 / 47.

Gezinme çubuğu olan her site, o anda bulunduğunuz bağlantıyı vurgular. Bunu yapmak için bir bileşenin, sunucunun daha sonradan söyleyemeyeceği bir şeyi bilmesi gerekir: şu anda ekranda hangi URL'nin olduğu.

next/navigation bunu size sağlar:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // /about üzerinde, pathname '/about' dizesidir
}

Bu bir hook olduğundan, zaten bildiğin kurallar geçerlidir: yalnızca dosyası 'use client' ile başlayan bir bileşende çalışır. Bir nav bar’ın genellikle aksi hâlde sunucu tarafından oluşturulan bir uygulamadaki birkaç istemci bileşeninden biri olmasının tüm nedeni budur: her rota değişikliğinde yeniden çalışması gerekir.

Oradan sonrası düz bir karşılaştırmadır:

<Link
    href="/menu"
    className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
    Menu
</Link>

Nav'ın nerede bulunduğuna dikkat et: layout içinde. Bir kez oluşturulur ve her gezinmede varlığını sürdürür; dolayısıyla onu yeniden oluşturan şey bir yeniden bağlama değil, pathname değerinin değişmesidir.

Görev

Kolay

Gezinme çubuğu çalışıyor, ancak hangi sayfada olduğunuzu gösteren hiçbir şey yok. Bunu components/Nav.jsx içinde düzeltin.

usePathname() işlevini çağırın ve sonucu pathname içinde saklayın.
"nav-link active" değeri href ile eşleştiğinde her bağlantıya pathname className'ini, aksi halde düz "nav-link" className'ini verin.

Home bağlantısı / yolunu, Menu bağlantısı ise /menu yolunu gösterir.

Kendin dene

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>
    );
}