Điều hướng bằng code
Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 35 trên 47.
<Link> xử lý việc điều hướng mà người dùng chọn. Nhưng đôi khi ứng dụng tự quyết định: sau khi biểu mẫu được gửi, sau khi đăng nhập thành công, sau khi nhấp vào nút cần thực hiện một số thao tác trước.
Với những trường hợp đó, bạn điều hướng bằng code với useRouter:
'use client';
import { useRouter } from 'next/navigation';
export default function CheckoutButton() {
const router = useRouter();
return (
<button onClick={() => router.push('/thanks')}>
Check out
</button>
);
}Đối tượng router cung cấp cho bạn:
router.push(url): chuyển đến đó và thêm vào lịch sửrouter.replace(url): chuyển đến đó, thay thế mục hiện tại (không thể quay lại mục đó)router.back(): lùi lại một bướcrouter.refresh(): chạy lại quá trình kết xuất phía máy chủ cho tuyến hiện tại
Có hai quy tắc đáng nhớ. Thứ nhất, useRouter đến từ next/navigation, không phải next/router cũ. Thứ hai, đây là một hook, nên cần có 'use client'.
Khi chỉ cần một liên kết thông thường, hãy dùng liên kết: đó là thẻ <a> thật, nên hoạt động với bàn phím, trình đọc màn hình và thao tác nhấp chuột giữa. Dùng router.push khi việc điều hướng là hệ quả của một việc nào đó, chứ không phải chính việc đó.
Thử thách
DễNút "Order now" trên trang chủ hiện chưa làm gì. Hãy thêm chức năng điều hướng.
- Trong
components/OrderButton.jsx, lấy router bằnguseRouter(). - Khi nhấp, chuyển người dùng đến
/menubằngrouter.push.
Để nguyên id="order-btn" của nút, vì các bài kiểm tra sẽ nhấp vào nút này.
Tự làm thử
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức thiết yếu về Next.js
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng