Почему при нажатии на элемент навигации не происходит изменение идентификатора (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" будет добавлен к этому элементу.

Я так понимаю Вам просто нужно подсвечивать активную ссылку? Можно написать так: <br/> <br/> <pre><code class="javascript">const Navigation: React.FunctionComponent = () =&gt; {

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

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

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

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