Link и NavLink в React для навигации

В React компоненты Linkи NavLinkиспользуются для навигации внутри приложения React. Они являются частью библиотеки react-router-dom, которая предоставляет возможности маршрутизации для одностраничных приложений.

  1. Компонент Link:
    Компонент Linkиспользуется для создания гиперссылки для навигации между различными маршрутами в приложении React. Он отображает тег с указанным целевым URL-адресом.

Пример использования:

import { Link } from 'react-router-dom';
function MyComponent() {
  return (
    <div>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </div>
  );
}
  1. Компонент NavLink.
    Компонент NavLinkаналогичен компоненту Link, но предоставляет дополнительные возможности стилизации. Он добавляет имя класса к отображаемому элементу, когда оно соответствует текущему URL-адресу, что позволяет применять активные стили к текущему маршруту.

Пример использования:

import { NavLink } from 'react-router-dom';
function MyComponent() {
  return (
    <div>
      <NavLink to="/home" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
    </div>
  );
}

В приведенном выше примере свойство activeClassNameиспользуется для указания имени класса CSS, который будет добавлен к активной ссылке.