Programatik Rotalama

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

<Link>, kullanıcının seçtiği gezinmeyi kapsar. Ancak bazen kararı uygulama verir: bir form gönderildikten sonra, bir giriş başarılı olduktan sonra veya önce yapılması gereken bir işi olan bir buton tıklandıktan sonra.

Bunlar için kod içinden useRouter ile gezinirsiniz:

'use client';

import { useRouter } from 'next/navigation';

export default function CheckoutButton() {
    const router = useRouter();

    return (
        <button onClick={() => router.push('/thanks')}>
            Check out
        </button>
    );
}

Yönlendirici nesnesi size şunları sağlar:

router.push(url): oraya git ve geçmişe ekle
router.replace(url): mevcut girdiyi değiştirerek oraya git (ona geri dönemezsin)
router.back(): bir adım geri
router.refresh(): geçerli rotanın sunucu oluşturma işlemini yeniden çalıştır

Hatırlamaya değer iki kural var. Birincisi, useRouter eski next/router yerine next/navigation içinden gelir. İkincisi, bu bir hook'tur; bu nedenle 'use client' gerektirir.

Düz bir bağlantı yeterli olacağında bağlantı kullanın: bu gerçek bir <a> öğesidir, dolayısıyla klavyelerle, ekran okuyucularıyla ve orta tıklamayla çalışır. Gezinme bir şeyin kendisi değil de bir sonucu olduğunda router.push kullanın.

Görev

Kolay

Ana sayfada hiçbir şey yapmayan bir "Order now" düğmesi var. Bu düğmenin yönlendirme yapmasını sağla.

components/OrderButton.jsx içinde, yönlendiriciyi useRouter() ile al.
Tıklama gerçekleştiğinde kullanıcıyı /menu adresine router.push ile gönder.

Düğmenin id="order-btn" özelliğini değiştirme: testler bu düğmeye tıklıyor.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}