Cómo usar el enrutador Next.js para detectar el enlace activo y asignarle una clase para que podamos darle estilo 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 darle un estilo diferente a los demás.
Esto es especialmente útil en el encabezado de su sitio, por ejemplo.
Link
El componente predeterminado Next.js que se ofrece next/link
no hace esto automáticamente por nosotros.
Podemos utilizar dos técnicas. Una es agregar la lógica a los hijos de Link
. La otra técnica es utilizar Link dentro de otro componente que podamos crear para encargarse de esta lógica.
Empecemos por el primero, que es el más sencillo:
import React from 'react'import Link from 'next/link'import { useRouter } from 'next/router'const menu = [ { title: 'Home', path: '/home' }, { title: 'Explore', path: '/explore' }, { title: 'Notifications', path: '/notifications' },]const Sidebar = () = { const router = useRouter() return ( div {menu.map((item, index) = { return ( Link key={index} href={item.path} a className={`cursor-pointer ${ router.pathname === item.path ? 'text-blue-500' : 'hover:bg-gray-900 hover:text-blue-500' }`} {item.title} /a /Link ) })} /div )}export default Sidebar
Recomendaría esto porque es lo más sencillo que puedes hacer.
Otra técnica es crear nuestro propio componente Link, almacenarlo en un archivo MyLink.js
en la /components
carpeta e importarlo en lugar del predeterminado next/link
. Fotos Porno y actrices porno
Dentro del componente, determinamos si el nombre de la ruta actual coincide con la href
propiedad del componente y, de ser así, agregamos la text-blue-500
clase a los hijos.
Por supuesto, puedes usar tus propias clases. Esta es una clase de Tailwind para hacer que el texto sea azul.
Finalmente devolvemos a estos niños con la clase actualizada, usando React.cloneElement()
:
import React from 'react'import Link from 'next/link'import { useRouter } from 'next/router'const MyLink = ({ href, children }) = { const router = useRouter() let className = children.props.className || '' if (router.pathname === href) { className = `${className} text-blue-500` } return Link href={href}{React.cloneElement(children, { className })}/Link}export default MyLink
Ahora podemos utilizar este MyLink
componente en los otros componentes:
import MyLink from 'components/MyLink'...MyLink href={'blog'} aBlog/a/MyLinkMyLink href={'about'} aAbout/a/MyLink
En este caso el código “usuario” es más simple, comparado con la primera técnica, ya que moviste la lógica dentro de MyLink
.
Tips de Next.js (enrutador de páginas)
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
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 darle estilo con CSS
programar
es
https://aprendeprogramando.es/static/images/programar-usando-el-enrutador-para-detectar-el-enlace-activo-en-next-2197-0.jpg
2024-10-16
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente