Компонент Link

Компонент Link предназначен для создания навигационных ссылок в приложениях на React, использующих React Router. Он обеспечивает управление маршрутизацией без полной перезагрузки страницы, что позволяет сохранять состояние приложения и обеспечивать плавный переход между различными представлениями.

Импорт и базовое использование

Для работы с Link необходимо импортировать его из пакета react-router-dom:

import { Link } from 'react-router-dom';

Создание простой ссылки выглядит следующим образом:

<Link to="/about">О сайте</Link>

Здесь атрибут to указывает путь, на который должен быть выполнен переход. Он может быть строкой или объектом с более детальными настройками маршрута.

Атрибут to

Атрибут to может быть:

  1. Строкой — путь маршрута:
<Link to="/contact">Контакты</Link>
  1. Объектом — с дополнительными параметрами:
<Link 
  to={{
    pathname: "/profile",
    search: "?tab=info",
    hash: "#section2",
    state: { fromDashboard: true }
  }}
>
  Профиль
</Link>
  • pathname — путь маршрута.
  • search — строка запроса, аналогичная ?key=value.
  • hash — якорь на странице.
  • state — объект состояния, который можно использовать при навигации, например для передачи данных между компонентами без использования глобального состояния.

Навигация с сохранением истории

Link добавляет запись в историю браузера, что позволяет использовать стандартные кнопки «Назад» и «Вперед». При этом перезагрузка страницы не выполняется, что отличает Link от стандартного HTML-тега <a>.

<Link to="/dashboard">Панель управления</Link>

Использование <a href="/dashboard"> в этом случае приведет к полной перезагрузке страницы и потере состояния React-приложения.

Стилизация активной ссылки

Для выделения активного маршрута используется компонент NavLink, который расширяет функциональность Link. Но даже без него можно вручную определить активное состояние:

<Link 
  to="/home" 
  className={location.pathname === "/home" ? "active" : ""}
>
  Главная
</Link>

Объект state и передача данных

С помощью state можно передавать любые данные между маршрутами:

<Link 
  to={{
    pathname: "/checkout",
    state: { cartItems: items }
  }}
>
  Оформить заказ
</Link>

На целевой странице доступ к этим данным осуществляется через хук useLocation:

import { useLocation } from 'react-router-dom';

const Checkout = () => {
  const location = useLocation();
  const { cartItems } = location.state || {};
  
  return <div>Элементы корзины: {cartItems.length}</div>;
}

Обработка кликов и предотвращение перехода

Компонент Link поддерживает стандартное событие onClick. Это позволяет выполнять дополнительные действия при клике:

<Link 
  to="/profile" 
  onCl ick={(e) => {
    if (!userLoggedIn) {
      e.preventDefault();
      alert("Необходимо войти в систему");
    }
  }}
>
  Профиль
</Link>

Здесь e.preventDefault() предотвращает стандартную навигацию, если выполняются определенные условия.

Отложенная и программная навигация

Для более сложных сценариев, где требуется программно изменить маршрут, используется хук useNavigate. Link можно комбинировать с этим подходом для динамической генерации ссылок:

import { useNavigate } from 'react-router-dom';

const NavigationButton = () => {
  const navigate = useNavigate();
  const goToProfile = () => navigate("/profile", { state: { fromDashboard: true } });

  return <button onCl ick={goToProfile}>Профиль</button>;
}

Особенности работы с вложенными маршрутами

При использовании вложенной маршрутизации Link корректно формирует относительные пути:

<Link to="settings">Настройки</Link>

Если текущий путь /profile, то переход будет /profile/settings. Для абсолютного пути следует использовать слэш в начале:

<Link to="/settings">Настройки</Link>

Поддержка современных функций браузера

Link корректно работает с браузерной историей, поддерживает открытие ссылок в новой вкладке через target="_blank":

<Link to="/help" target="_blank" rel="noopener noreferrer">Справка</Link>

Атрибут rel="noopener noreferrer" добавляется для безопасности при открытии внешних ссылок.

Резюме ключевых возможностей

  • Навигация без перезагрузки страницы.
  • Поддержка передачи состояния через объект state.
  • Формирование относительных и абсолютных маршрутов.
  • Стилизация и обработка активного состояния маршрута.
  • Совместимость с программной навигацией через useNavigate.
  • Управление событиями клика и предотвращение перехода при необходимости.

Link является основным строительным блоком для навигации в React Router и обеспечивает гибкость при реализации маршрутов, интеграции состояния и динамических переходов.

Оглавление