Problema:

Los enlaces de enrutador React se pueden usar en componentes de función para recuperar la ruta actual.

Sin embargo, no puedo encontrar ninguna referencia para el componente de clase .

manera funcional

Caso:

Tengo un menú de navegación y quiero realizar un seguimiento de la ruta actual para resaltarla en la parte delantera cambiando las clases de css según el estado actual.

Extracto de navegación:

 import React, { Component, Fragment } from 'react'; import { Link } from 'react-router-dom'; ... export default class Nav extends Component { ... render = (): JSX.Element => { return ( <> {/* Current: "border-green-500 text-gray-900" */} {/* Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */} <Link to="/" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" > Home </Link> </> ); } }

Pregunta:

¿Hay algún método para lograr este objetivo en un componente de clase de reacción?

Respuesta esperada:

• Referencia a un ejemplo de trabajo
• Fragmento de código
• Explicación de por qué esto no funcionaría
• Solución alternativa

¡Gracias de antemano!

¡Gracias a @genius fox dev, esta solución funcionó para mí!

Solución:

 {/* Current: "border-green-500 text-gray-900" */} {/* Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */} <NavLink // from 'react-router-dom' to="/" className={ ( {isActive} ) => ( isActive ? 'border-green-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' ).concat( ' inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium' ) } > Home </NavLink>