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