Всем привет. Подскажите пожалуйста. У меня есть навигационное меню. И

при клике на какой-то пункт меню мне нужно чтобы к нему добавлялся класс активности. В файле Апп в теге
<Header onClickLinks={(name) => alert(name)} links={[
'Главная', 'О нас', 'Команда', 'Каталог'
]}/>
я передаю массив. В файле компонента хедер у меня функциональный компонент, в пропсы я передаю этот массив и функцию. внутри неё три переменных
дальше идёт обычный хтмловский юл, а для лишек у меня уже прописана логика
const Header = ({links, onClickLinks}) => {
const state = useState(null)
const activeLink = state[0]
const setActiveLink = state[1]


<ul className="header-menu">
{
links.map((name, index) => (
<li className = {`header-menu__item ${activeLink === index ? 'header- menu__item_active' : ''}`} onClick={() => setActiveLink(index)} key={name}>
<a href='/'>{name}</a>
</li>
))
}
}
этот код добавляет класс активности лишке на которую я кликнул, но потом обновляется страничка и сразу этот класс активности убирается

подскажите что не так в коде ? сорри за возможно сложные переносы в коде, просто сложно в тут этот норм отформатировать.
для примера оставлю одну лишку хмтловскую чтобы было понятно как это выглядит на хтмл уровне без логики
<li className="header-menu__item header-menu__item_active"><a href={HOME_ROUTE}>Главная</a></li>

откуда вы взяли вот такую форму записи? const state = useState(null) const activeLink = state[0] const setActiveLink = state[1] links делаете массивом объектов, с именем и соответствующем path, потом берете соответсвующий path из урла и по нему уже ставить нужный вам класс к ссылке

Можете пожалуйста показать как это должно выглядеть ? И что если у меня логотип находится посередине навигационных ссылок и ему не нужно задавать класс активности

https://codesandbox.io/s/elastic-moser-9d5cj?file=/src/Header.js

код рабочий, но класс активности меняется только тогда когда я ручками урл прописываю, а нужно при клике

Кликаем по ссылке и все меняется, какими ручками?

У меня есть старый код в котором вместо массива объектов хранились просто стринг элементы. "главная", "о нас".... дальше я создал две переменные которые хранили данные из стейта. меп у меня принимал два параметра это нейм который принимал название из массива и индекс который принимал позицию из массива. Дальше уже в самой лишке у меня был класснейм где выполнялся код что если переменная в которой хранился state[0] была равна индексу тогда добавлять класс активности иначе нет. и после была функция онклик которая устанавливала этот класс. Но у меня работало всё не очень при клике на пункт меню класс добавлялся и страничка сразу перезагружалась и класс убирался. я обратился в чат и мне сказали что нужен не просто массив,а массив объектов. мог бы ты посмотреть мой старый код и немного его модифицировать ?

https://codesandbox.io/s/lively-sun-5wx2y?file=/src/Header.js Вот тут работает, но ведёт на одну и ту же страничку. Насколько я тебя понял мне тут нужно поменять линкс на массив объектов. Но есть также ещё одно но, логотип это ведь тоже ссылка и она должна вести на главную страничку, и логотип не долджен получать класс эктив

чел) у тебя ссылки обычные, и после клика страница перегружается и стейт внутри ресетится. По этому activeLink всегда null

Кстати, заменив на навлинк, класс активности добавляется. Я тестил

что за навлинк? из react-router?

<NavLink> - тоже самое что линк по сути, но автоматом добавляет активный класс на выбранный элемент

ну вроде не совсем тоже самое. Навлинк работает с историей браузера по другому. По этому у человека с a не работает ничего а с навлинком работает

Да

Насколько я знаю в ректе все ашки должны быть заменены на НавЛинк

когда тебе нужно SPA поведение

А что бывает что не нужно спа поведение?

🤷‍♂️ всякое бывает

Ну когда у тебя список ссылок внешних то да. Тут не надо СПА поведение

Это да, согласен

а разве не в этом смысл реакта ?

а если вкладку перезагрузить или открыть сразу по ссылке site/somePath?