reactjs / react-router-tutorial

5.52k stars 1.75k forks source link

activeClassName not working #340

Closed lisandropat closed 5 years ago

lisandropat commented 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.