Utilisation du routeur pour détecter le lien actif dans Next.js

Comment utiliser le routeur Next.js pour détecter le lien actif et lui attribuer une classe, afin que nous puissions le styliser avec CSS

Une fonctionnalité très importante lorsque vous travaillez avec des liens est de déterminer quelle est l'URL actuelle, et en particulier d'attribuer une classe au lien actif, afin que nous puissions le styliser différemment des autres.

Ceci est particulièrement utile dans l'en-tête de votre site, par exemple.

La valeur par défaut de Next.jsLinkcomposant offert ennext/linkne le fait pas automatiquement pour nous.

Nous pouvons créer nous-mêmes un composant Link, et nous le stockons dans un fichierLink.jsdans le dossier Composants et importez-le au lieu dunext/link.

Dans ce composant, nous allons d'abord importer React à partir dereact, Lien depuisnext/linket leuseRoutercrochet denext/router.

À l'intérieur du composant, nous déterminons si le nom du chemin actuel correspond auhrefaccessoire du composant, et si oui, nous ajoutons leselectedclasse aux enfants.

Nous retournons enfin ces enfants avec la classe mise à jour, en utilisantReact.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éléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: