Добавить активный класс к элементу навигации, когда вы нажимаете кнопку на странице с React

Question

Я работаю на небольшом сайте с React и хочу включить активный класс в Навигации. Моя проблема в том, что у меня есть три кнопки, которые относятся к 3 дочерним сайтам, и когда я нажимаю на одну из них, я хочу выделить связанный элемент навигации.

Вот мой код:

Мое приложение. js с маршрутизацией:

function App() {
  return (
    <BrowserRouter>
      <MainLayout>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/projects' component={Projects} />
          {/* <Route exact path='/projects/:id' component={Project} /> */}
          <Route exact path='/skills' component={Skills} />
          <Route exact path='/about' component={About} />
          <Route exact path='/contact' component={Contact} />
        </Switch>
      </MainLayout>
    </BrowserRouter>
  );
}

Здесь нет ничего фантастического. Я настроил маршрутизацию с реакции-роутером. Мои три кнопки находятся на Моей домашней странице, и это у меня дома. js. Вот только часть с одной кнопкой:

  <button className='btn'>
   <Link to='/about'>
    <span className='btn-span'>about me</span>
     </Link>
   </button>

Также здесь с реагирующим маршрутизатором я использовал тэг и установил путь "к =" требуемому пути ". Так мой компонент навигации, который находится в Навигации. js выглядит так this:

class Navigation extends Component {
  state = {
    navItems: [
      {
        id: 1,
        name: 'Home',
        to: '/',
        clasName: 'Header__Nav-link',
      },
      {
        id: 2,
        name: 'About Me',
        to: '/about',
        clasName: 'Header__Nav-link',
      },
      {
        id: 3,
        name: 'Projects',
        to: '/projects',
        clasName: 'Header__Nav-link',
      },
      {
        id: 4,
        name: 'Skills',
        to: '/skills',
        clasName: 'Header__Nav-link',
      },
      {
        id: 5,
        name: 'Contact',
        to: '/contact',
        clasName: 'Header__Nav-link',
      },
    ],
    activeLink: null,
    pathName: null,
  };
  componentDidMount() {
    const { checkPath } = this;
    const { navItems } = this.state;
    checkPath(navItems.to);
  }
  checkPath = toPath => {
    const pathLocation = window.location.pathname;
    if (toPath === pathLocation) {
      this.setState({ pathName: pathLocation });
    } else this.setState({ pathName: null });
  };

  clickItem = path => {
    this.setState({ activeLink: path });
    this.checkPath(path);
  };

  render() {
    const { navItems, activeLink, pathName } = this.state;
    return (
      <nav>
        <div className='Header__Nav'>
          {navItems.map(item => {
            return (
              <NavLink key={item.id} className='link' to={item.to}>
                <span
                  onClick={() => this.clickItem(item.to)}
                  className={
                    item.clasName +
                      ' ' +
                      (item.to === activeLink ? 'active-link' : '') ||
                    item.clasName +
                      ' ' +
                      (item.to === pathName ? 'active-link' : '')
                  }>
                  {item.name}
                </span>
              </NavLink>
            );
          })}
        </div>
      </nav>
    );
  }
}

Мне удалось заставить мой класс активной ссылки работать, когда я нажимаю на элемент навигации. Эта часть работает как дизайн. Но сейчас я хочу также отображать мою активную ссылку, когда я нажимаю на одной из кнопок на моей домашней странице.

Я пытался получить это из window.location.pathname, но без особого успеха