JAVASCRIPT

activeClassName react router

// Before React Router v6, to set class for active element we used:
 <NavLink to="/start" activeClassName="HERE NAME CLASS WHEN COMPONENT IS ACTIVE">start</NavLink>

// Now, instead of activeClassName="HERE..." use:
className={(navLinkObj) => "start-selected_" + navLinkObj.isActive}

// And then in css use:
.start-selected_true {
  background-color: red;
  border-bottom: 5px solid yellow;
}

// Also, you can do the same for inactive link. In css use:
.start-selected_false {
  background-color: blue;
  border-bottom: 5px dashed green;
}

// PS: (navLinkObj.isActive) returns true if element is active and false if element is not
// PS: I really advice you to check out documentation of React Router. It helped me :)
// React Router Documentation: https://v5.reactrouter.com/web/api

activeclassname in react router v6

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}