Как сохранить свойство isActive для дочерних эелементов NavLink?

В React важно понимать, что данные должны быть переданы от родительских компонентов к дочерним через пропсы. Если вы хотите сохранить и использовать свойство isActive для дочерних элементов NavLink, вам необходимо создать и использовать свой собственный компонент, который обернет NavLink и передаст ему isActive.

Вот пример кода, который показывает, как можно создать такой компонент:

import React from 'react';
import { NavLink } from 'react-router-dom';

const CustomNavLink = ({ to, isActive, children }) => (
  <NavLink
    to={to}
    isActive={isActive}
    activeClassName="active"
  >
    {children}
  </NavLink>
);

export default CustomNavLink;

Здесь мы создаем новый компонент CustomNavLink, который принимает те же пропсы, что и NavLink, а также проп isActive. Затем мы передаем эти пропсы внутрь компонента NavLink, используя синтаксис JSX. Обратите внимание, что мы также устанавливаем activeClassName в "active", чтобы определить стиль активного NavLink.

Теперь вы можете использовать этот компонент CustomNavLink в своем родительском компоненте, сохраняя и передавая проп isActive нужным дочерним элементам NavLink. Ниже приведен пример использования:

import React, { useState } from 'react';
import CustomNavLink from './CustomNavLink';

const Navigation = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <nav>
      <CustomNavLink to="/" isActive={isActive}>
        Home
      </CustomNavLink>
      <CustomNavLink to="/about" isActive={isActive}>
        About
      </CustomNavLink>
    </nav>
  );
};

export default Navigation;

В этом примере мы используем useState для создания локального состояния isActive и передаем его в качестве пропса в компоненты CustomNavLink. Теперь вы можете легко управлять значением isActive внутри родительского компонента и передавать его дочерним NavLink, сохраняя их состояние активным.