使用路由器檢測Next.js中的活動鏈接

如何使用Next.js路由器檢測活動鏈接並為其分配一個類,因此我們可以使用CSS對其進行樣式設置

使用鏈接時,一個非常重要的功能是確定當前URL是什麼,尤其是為活動鏈接分配一個類,因此我們可以將其樣式設置為與其他URL不同。

例如,這在您的網站標題中特別有用。

Next.js默認Link提供的組件next/link不會自動為我們執行此操作。

我們可以自己創建一個Link組件,並將其存儲在文件中Link.js在“組件”文件夾中,然後導入該文件夾而不是默認文件夾next/link

在此組件中,我們將首先從中導入Reactreact,鏈接來自next/linkuseRouter摘自next/router

在組件內部,我們確定當前路徑名稱是否與href組件的屬性,如果是的話,我們附加selected給孩子上課。

我們最終使用更新的類返回此子級,方法是React.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> }

免費下載我的Next.js手冊


接下來的更多教程: