Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

activeClassName not working #340

Closed
lisandropat opened this issue Jan 3, 2019 · 0 comments
Closed

activeClassName not working #340

lisandropat opened this issue Jan 3, 2019 · 0 comments

Comments

@lisandropat
Copy link

lisandropat commented Jan 3, 2019

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant