Tengo un parámetro llamado 'seleccionado' que resalta el botón en la barra lateral en css. Desafortunadamente, el tutorial que seguí no mostró cómo cambiar el estado de este parámetro a verdadero o falso. Me gustaría saber cómo hacer esto para futuros proyectos.
import { Update } from '@mui/icons-material'; import React from 'react' import { Link } from 'react-router-dom'; import './SidebarRow.css' function SidebarRow({ selected, title, Icon, linkto }) { if (title == "Home" && (window.location.pathname == "/")) { selected = true; } else if (title == "Trending" && (window.location.pathname == "/trending")) { selected = true; } else{ selected=false; } return ( <Link to={`/${linkto}`} > <div className= {`sidebarRow ${selected && "selected"}`} > <Icon className="sidebarRow_icon"/> <h2 className="sidebarRow_title">{title}</h2> </div> </Link> ) } export default SidebarRow;Las declaraciones 'si' son mi versión de principiante de este problema, y no funciona correctamente. Cualquier ayuda sería muy apreciada.
El problema principal en su lógica es que está pasando selected como accesorio pero luego desea cambiar su valor. No se deben modificar los accesorios. Defina el valor adecuado para selected en su componente principal y páselo al componente secundario, o cree una nueva variable como:
let localSelected = (title == "Home" && (window.location.pathname == "/") || (title == "Trending" && (window.location.pathname == "/trending") ? true : false ;Puede mantener la lógica if pero el operador ternario parece mucho más limpio.
Mi recomendación es usar React Router V6 y <NavLink> como una versión especial de <Link> que agregará atributos de estilo al elemento representado cuando coincida con la URL actual.
Un <NavLink> es un tipo especial de <Link> que sabe si está o no "activo".
Le sugiero que, además de la respuesta anterior, lea sobre el componente NavLink de React Router. Creo que la mayor parte de la lógica que necesita está incluida en él.