Resaltar enlace activo en react-router-dom v6:
En la versión 6 de react-router-dom, se destaca un enlace activo a través de la propiedad “isActive”. Esta propiedad permite determinar si un enlace coincide con la ruta actual y, en consecuencia, aplicar estilos específicos para resaltarlo.
Para resaltar un enlace activo, se debe asignar la propiedad “isActive” al componente “NavLink” del react-router-dom. Para ello, se puede utilizar una función que compare la ruta actual con la ruta del enlace. Esta función recibe dos parámetros: “match” y “location”. El “match” corresponde a la ruta del enlace y el “location” a la ruta actual.
A continuación se muestra un ejemplo de cómo resaltar un enlace activo en react-router-dom v6:
“`jsx
import { NavLink, useLocation } from ‘react-router-dom’;
const CustomLink = ({ to, label }) => {
const location = useLocation();
const isActive = (match, location) => {
if (match) {
return true;
} else {
return false;
}
};
return (
{label}
);
};
export default CustomLink;
“`
En este ejemplo, el componente “CustomLink” utiliza la función “useLocation” para obtener la ruta actual y la función “isActive” para compararla con la ruta del enlace. Si coinciden, se aplica la clase “active” al enlace activo.
Es importante destacar que la forma de resaltar un enlace activo puede variar según las necesidades y los estilos de cada proyecto.
Necesito resaltar el NavLink activo en react-router v6. En la documentación (https://v5.reactrouter.com/web/api/NavLink) se indica que debemos dejar de usar className y en su lugar usar una función de estilo en línea, pero no logro entenderlo adecuadamente. Aquí está el código en CodeSandbox: https://codesandbox.io/s/router-v6-highlight-active-link-c50bo?file=/src/Home.jsx Básicamente, el código a continuación muestra cómo . . . Read more