React Navigation bar change background on active link

Question

Hey I'm just starting to learn React and have a good knowledge of HTML, CSS, and JavaScript. I can't get this NavBar to change color if it is the active Link I have tried using several different ways but nothing is working for me. I have the layout how I want it I just don't know if I am writing the JSX code wrong but any help or tips would be amazing thanks.

React JSX code for NavBar

import React from "react";
import { Link } from "react-router-dom";

import "./NavBar.scss";

const NavBar = () => {
  return (
    <ul class="tab-bar">
      <Link to="/" className="tab">
        <li>Flash Cards</li>
      </Link>
      <Link to="/sets" className="tab">
        <li>Sets</li>
      </Link>
      <Link to="/new" className="tab">
        <li>New</li>
      </Link>
      <Link to="/about" className="tab">
        <li>About</li>
      </Link>
      <Link to="/login" className="tab">
        <li>Login</li>
      </Link>
    </ul>
  );
};

export default NavBar;

SCSS for the NavBar

$primary-color: #0f9b8e;
$secondary-color: #343837;
$tertiary-color: #03719c;

body {
  background: $secondary-color;
}
.tab-bar {
  margin: 0px;
  padding: 0px;
  display: flex;
  list-style-type: none;
}

.tab {
  width: 100%;
  padding: 20px 0;
  background: $primary-color;
  color: white;
  overflow: hidden;
  text-align: center;
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.tab:hover,
.tab:active {
  background: $tertiary-color;
}

Answer 1

Apart from using state, the other options are:

1) Simply use NavLink and activeClassName. It will automatically read url and adjust the style based on your url pathname

<NavLink activeClassName="active" className={"tab"} to="/contact">Contact</NavLink>

2) Use useHistory hook and read the current url and dynamically adjust the styles

...
const currentRoute = useHistory().location.pathname.toLowerCase();
...
<Link className={currentRoute.includes("home") ? "tab active" : "tab"} to="/home"> 
 Home
</Link>
...

Working copy of code sample (in the codesandbox)

Full Code Snippet

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useHistory, NavLink } from "react-router-dom";
import "./styles.scss";
const Nav = props => {
  const currentRoute = useHistory().location.pathname.toLowerCase();
  return (
    <div className="tab-bar">
      <Link
        className={currentRoute.includes("home") ? "tab active" : "tab"}
        active
        to="/home"
      >
        Home
      </Link>
      <Link
        className={currentRoute.includes("about") ? "tab active" : "tab"}
        to="/about"
      >
        About
      </Link>
      <NavLink activeClassName="active" className={"tab"} to="/contact">
        Contact
      </NavLink>
    </div>
  );
};

export default Nav;