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:
- Empezando con Next.js
- Next.js vs Gatsby vs create-react-app
- Cómo instalar Next.js
- Vincular dos páginas en Next.js usando Link
- Contenido dinámico en Next.js con el enrutador
- Alimente datos a un componente Next.js usando getInitialProps
- Aplicar estilo a los componentes de Next.js con CSS
- Precarga de contenido en Next.js
- Usando el enrutador para detectar el enlace activo en Next.js
- Ver fuente para confirmar que SSR está funcionando en Next.js
- Next.js: rellene la etiqueta principal con etiquetas personalizadas
- Implementar una aplicación Next.js en Now
- Next.js: ejecuta código solo en el lado del servidor o del cliente en Next.js
- Implementar una aplicación Next.js en producción
- Cómo analizar los paquetes de aplicaciones Next.js
- Módulos de carga diferida en Next.js
- Agregar un componente contenedor a su aplicación Next.js
- Los íconos agregados por Next.js a su aplicación
- Paquetes de aplicaciones Next.js
- Cómo usar el enrutador Next.js
- Cómo utilizar las rutas de la API de Next.js
- Cómo obtener cookies del lado del servidor en una aplicación Next.js
- Cómo cambiar el puerto de una aplicación Next.js