使用 Next.js Router 偵測當前鏈接
在 Next.js 中如何使用 Router 偵測當前鏈接並給予其一個類別,以便我們可以使用 CSS 來為其設置樣式。
當與鏈接一起工作時,一個非常重要的功能就是確定當前 URL,特別是為活動鏈接指定一個類別,以便我們可以將其與其他鏈接區分開來並進行不同的樣式設定。
這在網站的標頭中特別有用。
Next.js 預設的 Link
組件(next/link
)並不會自動為我們完成這個功能。
我們可以使用兩種技術。一種是將邏輯添加到 Link
的子組件中。另一種技術是在另一個我們可以構建的組件中使用 Link 來處理此邏輯。
讓我們從最簡單的方法開始:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| 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.map((item, index) => { return ( <Link key={index} href={item.path}> <a className={`cursor-pointer ${ router.pathname === item.path ? 'text-blue-500' : 'hover:bg-gray-900 hover:text-blue-500' }`} > {item.title} </a> </Link> ) })} </div> ) }
export default Sidebar
|
我建議使用這種方法,因為它是最簡單的方法。
另一種技術是創建自己的 Link 組件,並將其存儲在 /components
文件夾下的 MyLink.js
文件中,然後導入它而不是默認的 next/link
。
在組件中,我們確定當前路徑名是否與該組件的 href
prop 相匹配,如果是,則將 text-blue-500
類附加到其子組件上。
當然,你可以使用自己定義的類名。這裡使用的是 Tailwind 的類名,將文本設置為藍色。
最後,我們使用 React.cloneElement()
返回具有更新類別的子組件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| import React from 'react' import Link from 'next/link' import { useRouter } from 'next/router'
const MyLink = ({ href, children }) => { const router = useRouter()
let className = children.props.className || '' if (router.pathname === href) { className = `${className} text-blue-500` }
return <Link href={href}>{React.cloneElement(children, { className })}</Link> }
export default MyLink
|
現在,我們可以在其他組件中使用這個 MyLink
組件:
1 2 3 4 5 6 7 8 9 10 11 12 13
| import MyLink from 'components/MyLink'
<MyLink href={'blog'} > <a>博客</a> </MyLink> <MyLink href={'about'} > <a>關於</a> </MyLink>
|
在這種情況下,與第一種技術相比,“用戶”代碼更簡單,因為你將邏輯放在了 MyLink
內部。
tags: [“Next.js”, “Router”, “active link”, “CSS styling”]