es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React Router v6: cómo obtener la ruta actual en un componente de clase

06 Aug, 2023 Programación

Problema:

Los hooks de React Router se pueden usar en componentes de función para obtener la ruta actual.

Sin embargo, no puedo encontrar ninguna referencia para los componentes de clase.

Forma funcional

Caso:

Tengo un menú de navegación y quiero realizar un seguimiento de la ruta actual para resaltarla en el front-end mediante el cambio de 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 (
        <>
            {/* Actual: "border-green-500 text-gray-900" */}
            {/* Predeterminado: "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


    );
}

Pregunta:

¿Existe algún método para lograr este objetivo en un componente de clase de React?

Respuesta esperada:

  • Referencia a un ejemplo funcional
  • Código de muestra
  • Explicación de por qué esto no funcionaría
  • Solución alternativa

¡Gracias de antemano!

¡Gracias a @geniusfoxdev, esta solución sí me funcionó!

Solución:

{/* Actual: "border-green-500 text-gray-900" */} 
{/* Predeterminado: "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>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible lograr este objetivo en un componente de clase React usando el componente NavLink del paquete react-router-dom. Aquí hay un ejemplo de código:

    import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

export default class Nav extends Component {
  render() {
    return (
      <>
        <navlink to="/" activeclassname="border-green-500 text-gray-900" 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">
          Inicio
        </navlink>

    );
  }
}

    En este ejemplo, estamos usando el componente NavLink en lugar del componente regular Link. El componente NavLink tiene una propiedad incorporada activeClassName que podemos usar para agregar una clase de CSS cuando el enlace está activo (es decir, cuando la URL actual coincide con la propiedad to). También podemos usar la propiedad className para agregar cualquier clase predeterminada que deseemos para el enlace (en este caso, las mismas clases que en el código original).

    Esta solución funciona porque NavLink es capaz de determinar la ruta actual desde el contexto de react-router, al cual puede acceder independientemente de si se utiliza en un componente de función o de clase.

    Una solución alternativa sería crear un componente de orden superior (HOC) que envuelva el componente Link y agregue el activeClassName necesario en función de la ruta actual. Sin embargo, el uso de NavLink es una solución más sencilla e integrada que debería ser suficiente para la mayoría de los casos.

Comments are closed.