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

 

 

 

Usando el enrutador para detectar el enlace activo en next js 1

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.

LinkEl componente predeterminado Next.js que se ofrece next/linkno 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.jsen la /componentscarpeta 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 hrefpropiedad del componente y, de ser así, agregamos la text-blue-500clase 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 MyLinkcomponente 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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Usando el enrutador para detectar el enlace activo en next js 1
Usando el enrutador para detectar el enlace activo en next js 1

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

 

 

Update cookies preferences