Usando el enrutador para detectar el enlace activo en Next.js

Cómo usar el enrutador Next.js para detectar el enlace activo y asignarle una clase, para que podamos diseñarlo con CSS

Una característica muy importante al trabajar con enlaces es determinar cuál es la URL actual y, en particular, asignar una clase al enlace activo, para que podamos diseñarlo de manera diferente a los demás.

Esto es especialmente útil en el encabezado de su sitio, por ejemplo.

El Next.js predeterminadoLinkcomponente ofrecido ennext/linkno hace esto automáticamente por nosotros.

Podemos crear un componente Link nosotros mismos y lo almacenamos en un archivoLink.jsen la carpeta Componentes e impórtelo en lugar del predeterminadonext/link.

En este componente, primero importaremos React desdereact, Enlace desdenext/linky eluseRoutergancho denext/router.

Dentro del componente determinamos si el nombre de la ruta actual coincide con elhrefprop del componente, y si es así agregamos elselectedclase a los niños.

Finalmente devolvemos a estos niños con la clase actualizada, usandoReact.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> }

Descarga mi gratisManual de Next.js


Más próximos tutoriales: