Почему при нажатии на элемент навигации не происходит изменение идентификатора (id)?

В React Navigation для добавления класса "active" при первом клике на элемент навигации, а не на втором, можно использовать состояние компонента, чтобы отслеживать текущий выбранный элемент. 

Например, можно создать состояние "activeTab" и при нажатии на элемент навигации изменять это состояние, добавляя класс "active" к выбранному элементу. 

Пример кода:

```jsx
import React, { useState } from 'react';

const Navigation = () => {
  const [activeTab, setActiveTab] = useState(null);

  const handleTabClick = (id) => {
    setActiveTab(id);
  }

  return (
    <div>
      <button className={activeTab === 'tab1' ? 'active' : ''} onClick={() => handleTabClick('tab1')}>Оценки</button>
      <button className={activeTab === 'tab2' ? 'active' : ''} onClick={() => handleTabClick('tab2')}>Задания</button>
    </div>
  );
}
```

В этом примере, при клике на элемент навигации, состояние "activeTab" будет изменяться, и класс "active" будет добавляться к выбранному элементу. 

Таким образом, при первом клике на "Оценки", класс "active" будет добавлен к этому элементу.

Я так понимаю Вам просто нужно подсвечивать активную ссылку? Можно написать так: 
 
 
const Navigation: React.FunctionComponent = () => {

  const routeList: RouteItem[] = [
    { name: 'Главная', path: '/' },
    { name: 'Оценки',  path: '/grade' }
  ]

  function getClassName({ isActive }: { isActive: boolean }): string {
    return `${styles.link} ${isActive ? styles.active : 0}`
  }

  return (
    <ul className={styles.list}>
      {
        routeList.map((route) => (
          <li key={route.path} className={styles.item}>
            <NavLink to={route.path} className={getClassName} data-scroll>
              {route.name}
            </NavLink>
          </li>
        ))
      }
    </ul>
  )

}
 
 
 Библиотека react-router-dom предоставляет компоненты Link и NavLink , где второй может принимать в качестве className функцию, которая принимает такие параметры как isActive , isPending  и т.п. 
 
 Так что состояние тут явно лишнее, как и обработка клика по элементам li ) 
 
 upd : 
 
 Чтобы не заморачиваться с длинными именами классов - установите маленькую библиотеку classnames : 
 
 
function getClassName({ isActive }: { isActive: boolean }): string {
    return classNames(styles.link, {
      [styles.active]: isActive
    })
  }