Программный маршрутизация

Часть раздела Основы Next.js путешествия по React на Coddy — урок 35 из 47.

<Link> подходит для случаев, когда навигацию выбирает пользователь. Но иногда решение принимает само приложение: после отправки формы, после успешного входа или после клика по кнопке, перед которым нужно выполнить определенную работу.

Для таких случаев навигация из кода выполняется с помощью useRouter:

'use client';

import { useRouter } from 'next/navigation';

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

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

Объект router предоставляет вам:

router.push(url): перейти по адресу и добавить его в историю
router.replace(url): перейти по адресу, заменив текущую запись (без возможности вернуться к ней)
router.back(): на один шаг назад
router.refresh(): повторно выполнить серверный рендеринг текущего маршрута

Два правила, которые стоит запомнить. Во-первых, useRouter импортируется из next/navigation, а не из старого next/router. Во-вторых, это хук, поэтому ему требуется 'use client'.

Когда достаточно обычной ссылки, используйте ссылку: это настоящий <a>, поэтому он работает с клавиатурой, программами экранного доступа и нажатием средней кнопки мыши. Используйте router.push, когда навигация является следствием какого-либо действия, а не самим действием.

Задание

Легко

На главной странице есть кнопка "Order now", которая ничего не делает. Сделайте так, чтобы она выполняла переход.

В components/OrderButton.jsx получите маршрутизатор с помощью useRouter().
При клике отправьте пользователя на /menu с помощью router.push.

Не меняйте id="order-btn" у кнопки: тесты кликают по нему.

Попробуйте сами

import './globals.css';

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

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