ルーターを使用してNext.jsでアクティブなリンクを検出する

Next.jsルーターを使用してアクティブなリンクを検出し、それにクラスを割り当てて、CSSでスタイルを設定する方法

リンクを操作する際の非常に重要な機能の1つは、現在のURLを判別すること、特にアクティブなリンクにクラスを割り当てることです。これにより、他のリンクとは異なるスタイルを設定できます。

これは、たとえばサイトのヘッダーで特に役立ちます。

Next.jsのデフォルトLinkで提供されるコンポーネントnext/linkこれは自動的には行われません。

Linkコンポーネントを自分で作成し、ファイルに保存することができますLink.jsコンポーネントフォルダに移動し、デフォルトの代わりにインポートしますnext/link

このコンポーネントでは、最初にReactをからインポートしますreact、からのリンクnext/linkそしてそのuseRouterからフック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ハンドブック


その他の次のチュートリアル: