使用 Next.js Router 偵測當前鏈接
在 Next.js 中如何使用 Router 偵測當前鏈接並給予其一個類別,以便我們可以使用 CSS 來為其設置樣式。 當與鏈接一起工作時,一個非常重要的功能就是確定當前 URL,特別是為活動鏈接指定一個類別,以便我們可以將其與其他鏈接區分開來並進行不同的樣式設定。 這在網站的標頭中特別有用。 Next.js 預設的 Link 組件(next/link)並不會自動為我們完成這個功能。 我們可以使用兩種技術。一種是將邏輯添加到 Link 的子組件中。另一種技術是在另一個我們可以構建的組件中使用 Link 來處理此邏輯。 讓我們從最簡單的方法開始: import React from 'react' import Link from 'next/link' import { useRouter } from 'next/router' const menu = [ { title: '首頁', path: '/home' }, { title: '探索', path: '/explore' }, { title: '通知', path: '/notifications' }, ] const Sidebar = () => { const router = useRouter() return ( <div> {menu....