Sử dụng bộ định tuyến để phát hiện liên kết hoạt động trong Next.js

Cách sử dụng Bộ định tuyến Next.js để phát hiện liên kết đang hoạt động và gán một lớp cho nó, vì vậy chúng tôi có thể tạo kiểu cho nó bằng CSS

Một tính năng rất quan trọng khi làm việc với các liên kết là xác định đâu là URL hiện tại và cụ thể là gán một lớp cho liên kết đang hoạt động, vì vậy chúng tôi có thể tạo kiểu cho nó khác với các lớp khác.

Ví dụ, điều này đặc biệt hữu ích trong tiêu đề trang web của bạn.

Next.js mặc địnhLinkthành phần được cung cấp trongnext/linkkhông tự động làm điều này cho chúng tôi.

Chúng tôi có thể tự tạo một thành phần Liên kết và chúng tôi lưu trữ nó trong một tệpLink.jstrong thư mục Thành phần và nhập thay vì nhập mặc địnhnext/link.

Trong thành phần này, trước tiên chúng ta sẽ nhập React từreact, Liên kết từnext/linkvàuseRoutermóc từnext/router.

Bên trong thành phần, chúng tôi xác định xem tên đường dẫn hiện tại có khớp vớihrefchỗ dựa của thành phần và nếu vậy, chúng tôi nốiselectedlớp cho trẻ em.

Cuối cùng, chúng tôi trả lại con này với lớp được cập nhật, sử dụngReact.cloneElement():

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
export default ({ href, children }) => {
const router = useRouter()
let className = children.props.className || ‘’
if (router.pathname === href) {
className = </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">className</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> selected
}
return <Link href={href}>{React.cloneElement(children, { className })}</Link>
}

Tải xuống miễn phí của tôiSổ tay Next.js

Sử dụng bộ định tuyến để phát hiện liên kết hoạt động trong Next.js

Cách sử dụng Bộ định tuyến Next.js để phát hiện liên kết đang hoạt động và gán một lớp cho nó, vì vậy chúng tôi có thể tạo kiểu cho nó bằng CSS

Thêm các bài hướng dẫn tiếp theo: