Question: Active Link Highlight

Hello

How can I highlight a link that has been clicked. For example the supersimple code below will highlight link named ‘about’ in blue, for a second, after which it flickers back to normal navbar. Albeit I been able to in many ways custom style your navbar I can not for all the tea in the world figure out how to highlight an active link and keep it highlighted. For your info, I am using BrowserRouter, but not sure if that has any relevance…

Simple code (the blue highlight flickers when you click but then navbar link goes back to normal look and feel)

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  onClick() {
    this.setState({
      bgColor:'blue'
    })
  }

  render() {

    return (
      <Navbar color="light" light expand="sm">
        <NavbarBrand href="/">BLEBB BLEBB</NavbarBrand>
        <NavbarToggler onClick={this.toggle}/>
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem className="navLink">
              <NavLink href="/" onClick={this.onClick.bind(this)} style={{backgroundColor:this.state.bgColor}}>About</NavLink>
            </NavItem>
            <NavItem className="navLink">
              <NavLink href="/work">Work</NavLink>
            </NavItem>
            <NavItem className="navLink">
              <NavLink href="/contact">Contact</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    );
  }

Thanks in Advance, fellow tea drinkers

[thorstensson]

Hello,

thanks for your answer, I had to interpolate the solution slightly. When I tried the code on the link in your reply, even if I copied and pasted the class, I recieved that activeClassName is not supported.

However, the below worked, and my menu now highlights nicely. That being sad I have little idea at this point what tag={} does. Could someone kindly explain what it does? After explaining that, you can close this as I now got it working. Unless, my solution is errorneous in some way!

import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';
import './nav.css';
import { NavLink as RRNavLink } from 'react-router-dom';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <Navbar color="light" light expand="sm">
        <NavbarBrand href="/">COOKIE MONSTER LIVES</NavbarBrand>
        <NavbarToggler onClick={this.toggle}/>
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem className="navItem">
              <NavLink tag={RRNavLink} className="nav-link" to="/" activeClassName="active" exact path="/">About</NavLink>
            </NavItem>
            <NavItem className="navItem">
              <NavLink tag={RRNavLink} className="nav-link" to="/work" activeClassName="active">Work</NavLink>
            </NavItem>
            <NavItem className="navItem">
              <NavLink tag={RRNavLink} className="nav-link" to="/contact" activeClassName="active">Contact</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    );
  }
}

[thorstensson]

Thanks, got it all working now! Moving on!