Почему при клике на навигацию не меняется id?

Question

[gaming_shark]

import React, { useState } from 'react';
import styles from './Navigation.module.scss';
import { Link } from 'react-router-dom';

type RouteItem = {
  name: string;
  path: string;
};
const Navigation: React.FC = () => {
  const [categoryId, setCategoryId] = useState(0);
  const onClickCategory = (id: number) => {
    setCategoryId(id);
  };

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

  return (
    <ul className={styles.menu}>
      {routeList.map((el, i) => (
        <li key={el.name} onClick={() => onClickCategory(i)} className={styles.link}>
          <Link
            to={el.path}
            className={`${styles.link} ${categoryId == i ? styles.active : ''}`}
            data-scroll>
            {el.name}
          </Link>
        </li>
      ))}
    </ul>
  );
};

export default Navigation;

При первом клике на "Оценки" categoryId не меняется, только если кликнуть еще раз. Следовательно класс "active" добавляется только со второго клика. Как это исправить?

Answer 1

[Михаил]

Я так понимаю Вам просто нужно подсвечивать активную ссылку? Можно написать так:

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
    })
  }

upd 2:

Клик на элементе списка может некорректно обрабатываться из-за внутреннего устройства компонента Link, поэтому если Вам так необходимо использовать состояние categoryId, то событие клика нужно вешать на сам компонент Link. Но костылем это быть не перестанет)

Comments

[gaming_shark]

спасибо, огромное (про NavLink не знал интересная штука)