Использование HTML кнопок вместо Link в React-router

Быстрый ответ

Превращение компонента Link из react-router-dom в кнопку не составит труда, если применить стили кнопки непосредственно к компоненту Link.

import { Link } from 'react-router-dom';
import './Button.css'; // Применяем стили кнопки

...

<Link to="/your-route" className="btn">
  Нажми здесь
</Link>

...

/* Button.css */
.btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

Теперь компонент Link выглядит как кнопка.

Углубленный разбор: управление и семантика

Навигация с помощью useHistory

Для реализации программной навигации с внешним видом кнопки рекомендуется использовать React-кнопку и хук useHistory.

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

const Button = ({ to }) => {
  const history = useHistory();

  const navigate = () => {
    history.push(to); // Нажми для навигации 🚀
  };

  return <button onClick={navigate}>Нажми здесь</button>;
};

Метод push делает переход по ссылке осознанной операцией и предоставляет возможности для организации условной маршрутизации и анализа.

Подробнее об этом расскажет наш спикер на видео

Безопасность превыше всего

Следование принципам доступности и использование правильно подобранных семантических элементов HTML и ролей ARIA влияют на удобство использования сайта для пользователей с ограничениями:

<Link to="/your-route" className="btn" role="button" aria-label="Перейти к направлению">
  Нажми здесь
</Link>

Компонентный подход

Универсальный компонент LinkButton

Для упрощения многократного использования функционала создайте компонент LinkButton:

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

const LinkButton = ({ className, to, children }) => (
  <Link to={to} className={`btn ${className}`} role="button">
    {children} // Здесь расположены дочерние элементы компонента `LinkButton` 👶
  </Link>
);

export default LinkButton;

LinkButton обеспечивает семантическую целостность и чистоту кода в рамках одного компонента.

А что на счёт стиля?

Кто создаёт ваш образ?

Использование Link в виде кнопки позволяет сохранить единый стильный оформление по всему приложению:

/* Стили кнопки */
.link-as-button {
   ...
}

<Link to="/your-route" className="link-as-button">
  Нажми здесь
</Link>

Дизайнерская одежда: Material-UI

Для интеграции с Material-UI в свойствах component указываем Link:

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

<Button component={Link} to="/destination">
  Стильно и функционально! 👠
</Button>

Визуализация

Машины и ключи редко упоминаются вместе, однако они наглядно иллюстрируют аналогию:

• 🚗 – это наша кнопка, без ключа они никуда не поедут.
• 🔑 – это Link, который позволяет начать движение.

В коде мы "оборачиваем" Link в <button>:

<button>🔑🚗 <Link to="/route">Поехали!</Link></button>

Когда машина начинает движение при нажатии кнопки:

После: 🚗💨 (Машина движется после нажатия кнопки)
// Аналогично комбинация кнопки и ссылки ведёт нас по новому маршруту.

Практические рекомендации

Фокус на HTML

Оборачивание Link в button изменяет внешний вид, но при этом важно продумать вопросы доступности и практичности использования. Используйте инструменты, такие как validator.w3.org, чтобы ваш HTML был валидным.

Экспериментируйте с хуками

Хук useRouter предлагает компактный подход, основанный на использовании хуков, благодаря чему работа с маршрутизацией в функциональных компонентах становится проще.

Фильтрация свойств

В пользовательском компоненте LinkButton нужно убрать атрибуты, не связанные с функционалом кнопки, чтобы код компонента оставался чистым:

<Link {...otherProps} to={to} className={`btn ${className}`} role="button">
  {children}
</Link>

Полезные материалы

1. Home v6.21.3 | React Router — последняя документация React Router.
2. Кнопка или Ссылка | Вводный курс по доступности — обсуждение вопросов доступности при выборе между кнопкой и ссылкой.
3. Полное руководство по Ссылкам и Кнопкам | CSS-Tricks — советы по стилям для правильного создания кнопок и ссылок.
4. GitHub – css-modules/css-modules: Документация о css-modules — использование CSS Modules в React для ограничения видимости стилей.
5. Списки и Ключи – React — важность свойства key при работе с компонентами списка в React.