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

The router object gives you:

router.push(url): go there, and add it to history
router.replace(url): go there, replacing the current entry (no going back to it)
router.back(): one step backwards
router.refresh(): re-run the server render of the current route

Hatırlanmaya değer iki kural. İlki, useRouter eski next/router'dan değil, next/navigation'dan gelir. İkincisi, bu bir hook'tur, dolayısıyla '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. Yönlendirme yapmasını sağlayın.

components/OrderButton.jsx içinde, useRouter() ile router'ı alın.
Tıklandığında, router.push ile kullanıcıyı /menu adresine gönderin.

Düğmenin id="order-btn" niteliğini değiştirmeyin: testler buna tıklar.

Kendin dene

import './globals.css';

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

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