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'tur, dolayısıyla bildiğiniz kurallar burada da geçerlidir: yalnızca dosyasının başında 'use client' bulunan bir bileşende çalışır. Navigasyon çubuğunun (nav bar), diğer kısımları sunucu tarafında işlenen (server-rendered) bir uygulamada genellikle az sayıdaki client bileşeninden biri olmasının tek 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'in nerede yer aldığına dikkat edin: layout içinde. Bir kez render edilir ve her gezinmede kalmaya devam eder, bu nedenle onu yeniden render ettiren şey bileşenin yeniden bağlanması (remount) değil, pathname bilgisinin değişmesidir.

Görev

Kolay

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

usePathname() fonksiyonunu çağırın ve bunu pathname değişkeninde saklayın.
Her linke, href değeri pathname ile eşleştiğinde "nav-link active" className değerini, aksi takdirde sadece "nav-link" değerini verin.

Home linki /, Menu linki ise /menu adresini işaret eder.

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