Target Active Link cuando la ruta está activa en Next.js

Verificamos de forma exhaustivamente cada escrito de nuestro sitio web con el objetivo de mostrarte siempre la información certera y actual.

Solución:

Una solución simple basada en el useRouter gancho:

import Link from "next/link";
import  useRouter  from "next/router";


export const MyNav = () => 

  const router = useRouter();

  return (
    

      

        home
      
      

        about
      
    
  );
;

Primero, necesita tener un componente llamado Enlace, con temporal attribute activeClassName

import  useRouter  from 'next/router'
import PropTypes from 'prop-types'
import Link from 'next/link'
import React,  Children  from 'react'

const ActiveLink = ( children, activeClassName, ...props ) => 

ActiveLink.propTypes = 
  activeClassName: PropTypes.string.isRequired,


export default ActiveLink

Luego tenga una barra de navegación con el componente Link creado y el selector css :active para diferenciar entre enlace activo e inactivo.

import ActiveLink from './ActiveLink'

const Nav = () => (
  
)

export default Nav

Después de eso, puede implementar la barra de navegación en su página:

import Nav from '../components/Nav'

export default () => (
  

    
)

Él key de cómo funciona este trabajo se encuentra dentro del componente Enlace, comparamos el valor de router.pathname con attribute href desde el enlace, si el valor coincide con el otro, coloque un nombre de clase específico para que el enlace parezca activado.

Referencia: aquí

Otra versión mínima que soporta as apuntalar:

import Link from "next/link";
import withRouter from "next/router";
import Children from "react";
import React from "react";

export default withRouter((router, children, as, href, ...rest) => (
   
      React.cloneElement(Children.only(children), )
   
));

---

---

Utiliza Nuestro Buscador