Routing Terprogram
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 35 dari 47.
<Link> menangani navigasi yang dipilih pengguna. Namun, terkadang aplikasi yang menentukan: setelah formulir dikirim, setelah login berhasil, atau setelah tombol diklik dan ada pekerjaan yang harus dilakukan terlebih dahulu.
Untuk hal tersebut, kamu melakukan navigasi dari kode dengan useRouter:
'use client';
import { useRouter } from 'next/navigation';
export default function CheckoutButton() {
const router = useRouter();
return (
<button onClick={() => router.push('/thanks')}>
Check out
</button>
);
}object router memberimu:
router.push(url): buka halaman itu, lalu tambahkan ke riwayatrouter.replace(url): buka halaman itu dengan mengganti entri saat ini, sehingga kamu tidak bisa kembali ke entri sebelumnyarouter.back(): mundur satu langkahrouter.refresh(): jalankan ulang render server untuk rute saat ini
Ada dua aturan yang perlu diingat. Pertama, useRouter berasal dari next/navigation, bukan dari next/router yang lama. Kedua, ini adalah hook, jadi memerlukan 'use client'.
Jika tautan biasa sudah cukup, gunakan tautan: itu adalah <a> sungguhan, sehingga berfungsi dengan keyboard, pembaca layar, dan klik tengah. Gunakan router.push jika navigasi merupakan akibat dari sesuatu, bukan sesuatu itu sendiri.
Tantangan
MudahHalaman beranda memiliki tombol "Order now" yang tidak melakukan apa pun. Buat tombol itu melakukan navigasi.
- Di
components/OrderButton.jsx, dapatkan router denganuseRouter(). - Saat diklik, arahkan pengguna ke
/menudenganrouter.push.
Biarkan id="order-btn" pada tombol apa adanya: pengujian akan mengekliknya.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
