[Sugestão] Usar o NavLink

Com esse componente do React-Router-DOM, podemos facilmente criar condições para renderizar classes e componentes filhos quando a url da prop to do NavLink está ativa.

Exemplo do código da aula usando tal componente:

import styles from "./Navbar.module.scss";
import { ReactComponent as Logo } from "../../assets/logo.svg";
import classNames from "classnames";
import { RiShoppingCart2Line, RiShoppingCartFill } from "react-icons/ri";
import Busca from "../Busca";
import { NavLink } from "react-router-dom";

const iconeProps = {
  color: "white",
  size: 24,
};

export default function Navbar() {
  return (
    <nav className={styles.nav}>
      <Logo className={styles.logo} />
      <div className={styles.links}>
        <div>
          <NavLink
            to="/"
            className={({ isActive }) =>
              classNames(styles.link, {
                [styles.selected]: isActive,
              })
            }
          >
            Página inicial
          </NavLink>
        </div>
      </div>
      <div className={styles.busca}>
        <Busca />
      </div>
      <div className={styles.icones}>
        <NavLink to="/carrinho">
          {({ isActive }) =>
            isActive ? <RiShoppingCartFill {...iconeProps} /> : <RiShoppingCart2Line {...iconeProps} />
          }
        </NavLink>
      </div>
    </nav>
  );
}