React Navigation bar меняет фон на активной ссылке

Question

Эй, я только начинаю изучать React и хорошо знаю HTML, CSS и JavaScript. Я не могу заставить этот NavBar изменить цвет, если это активная ссылка, которую я пробовал использовать несколькими различными способами, но у меня ничего не работает. У меня есть макет, как я хочу, я просто не знаю, пишу ли я код JSX неправильно, но любая помощь или советы будут удивительными, спасибо.

Реагируйте код JSX для 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;

S CSS для 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

Помимо использования состояния, другие опции:

1) Просто используйте NavLink и activeClassName. Он будет автоматически читать URL-адрес и корректировать стиль в зависимости от вашего пути URL-адреса

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

2) Использовать useHistory hook , читать текущий URL-адрес и динамически корректировать стили

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

Рабочая копия образца кода (в кодах и в окне)

Полный фрагмент кода

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;

Answer 2

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

    import "./NavBar.scss";

    const NavBar = () => {

  const [currentLink, setCurrentLink] = useState('');

  let background = {};
  switch(currentLink){
  case 'flash':
   background= { backgroundColor: 'red'};
   break;
  case 'sets':
   background= { backgroundColor: 'blue'};
   break;
  case 'new':
   background= { backgroundColor: 'green'};
   break;
  case 'about':
   background= { backgroundColor: 'yellow' };
   break;
  case 'login':
   background= { backgroundColor: 'cyan'};
   break;
  default:
   background = {}
}

  return (
    <ul class="tab-bar" style={background}>
      <Link to="/" className="tab" onClick={() => setCurrentLink('flash')}>
        <li>Flash Cards</li>
      </Link>
      <Link to="/sets" className="tab" onClick={() => setCurrentLink('sets')}>
        <li>Sets</li>
      </Link>
      <Link to="/new" className="tab" onClick={() => setCurrentLink('new')}>
        <li>New</li>
      </Link>
      <Link to="/about" className="tab" onClick={() => setCurrentLink('about')}>
        <li>About</li>
      </Link>
      <Link to="/login" className="tab" onClick={() => setCurrentLink('login')}>
        <li>Login</li>
      </Link>
    </ul>
  );
};

    export default NavBar;

Это будет работать.