Closed lisandropat closed 5 years ago
Tried "exact", "onlyActiveOnIndex" and "IndexRouter". Both exact and onlyActiveOnIndex didn't work, IndexRouter doesn't seem to exist in the package.
class NavLink extends Component { render() { return <Link {...this.props} activeClassName="active" /> } } class Menu extends Component { state = { showing: false }; render() { const { showing } = this.state; return ( <nav> <header> <Link to="/"><img src={this.props.location.pathname === "/contact" ? navLogo : mainLogo} alt="Myval" id="nav-logo" draggable="false" /></Link> <i className="fas fa-bars" onClick={() => this.setState({ showing: !showing })} style={{ color: this.props.location.pathname === "/contact" ? 'white' : '#222326' }} /> { showing ? <aside> <Link to="/" onClick={() => this.setState({ showing: !showing })}><img src={navLogo} alt="Myval" id="nav-logo" /></Link> <i className="fas fa-chevron-up" onClick={() => this.setState({ showing: !showing })}/> <div id="nav-link-container"> <div className="nav-link" onClick={() => this.setState({ showing: !showing })}><NavLink to="/services">Servicios</NavLink></div> <div className="nav-link" onClick={() => this.setState({ showing: !showing })}><NavLink to="/projects">Proyectos</NavLink></div> <div className="nav-link" onClick={() => this.setState({ showing: !showing })}><NavLink to="/about">Estudio</NavLink></div> <div className="nav-link" onClick={() => this.setState({ showing: !showing })}><NavLink to="/contact">Contacto</NavLink></div> </div> </aside> : null } </header> </nav> ); } } export const NavMenu = withRouter(Menu);
and CSS for .active { color: red !important }.
EDIT: didn't have to create a component, just import it from react-router-dom. Online answers seem to be for old react-router versions.
Tried "exact", "onlyActiveOnIndex" and "IndexRouter". Both exact and onlyActiveOnIndex didn't work, IndexRouter doesn't seem to exist in the package.
and CSS for .active { color: red !important }.
EDIT: didn't have to create a component, just import it from react-router-dom. Online answers seem to be for old react-router versions.