Creé esta aplicación de reacción con una barra lateral y se ve bastante bien, pero una cosa que no puedo entender es cómo marcar el elemento (enlace de página) en el que se hizo clic.
Aquí está el código, agregué activeClassName="selected" a SidebarLink const y lo agregué al componente con estilo, pero no funciona.
import React, { useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; const SidebarLink = styled(Link)` /*border: 3px solid green;*/ display: flex; color: #e1e9fc; justify-content: space-between; align-items: center; padding: 20px; list-style: none; height: 60px; text-decoration: none; font-size: 18px; &:hover { background: #252831; border-left: 4px solid #ffbc2e; cursor: pointer; } .selected { color: red; } `; const SidebarLabel = styled.span` margin-left: 16px; `; /* Used for Training dropdown */ const DropdownLink = styled(Link)` /*border: 3px solid red;*/ background: #252831; height: 60px; padding-left: 3rem; display: flex; align-items: center; text-decoration: none; color: #f5f5f5; font-size: 16px; font-weight: bold; &:hover { background: #48526F; border-left: 4px solid #ffbc2e; cursor: pointer; } `; const SubMenu = ({ item }) => { const [subnav, setSubnav] = useState(false); const showSubnav = () => setSubnav(!subnav); return ( <> <SidebarLink to={item.path} onClick={item.subNav && showSubnav} activeClassName="selected" exact> <div className="sidebarTextContainer"> <div className="sidebarIcon">{item.icon}</div> <div className="sidebarText"><SidebarLabel>{item.title}</SidebarLabel></div> </div> <div> {item.subNav && subnav ? item.iconOpened : item.subNav ? item.iconClosed : null} </div> </SidebarLink> {subnav && item.subNav.map((item, index) => { return ( <DropdownLink to={item.path} key={index}> {item.icon} <SidebarLabel>{item.title}</SidebarLabel> </DropdownLink> ); })} </> ); }; export default SubMenu;¿Alguien tiene alguna idea, por favor, sobre cómo solucionar esto?
Aunque está preguntando sobre recordar en qué elemento se hizo clic, creo que lo que realmente quiere es que el enlace correspondiente a la página actual se resalte como activo.
Si está utilizando react-router v6, debe usar NavLink en lugar de Link ( docs ).
Un
<NavLink>es un tipo especial de<Link>que sabe si está o no "activo". De forma predeterminada, una claseactivese agrega a un componente<NavLink>cuando está activo.
Debe actualizar el componente importado y eliminar activeClassName .
const SidebarLink = styled(NavLink)` // ... &.active { color: red; } ` // ... <SidebarLink to={item.path} onClick={item.subNav && showSubnav} exact> ... </SidebarLink> Si está utilizando react-router v5, entonces también debe usar NavLink pero debe pasar el nombre de activeClassName , como lo hace en su ejemplo. En este caso, simplemente debe sustituir Link por NavLink .
También tenga en cuenta que la sintaxis de CSS anidada es incorrecta. Se aplica a los elementos secundarios de SidebarLink , no en SidebarLink en sí. Desea reemplazar .selected { color: red; } con &.selected { color: red } .