Зачем нужны Link и NavLink?
Вы ведь не хотите, чтобы пользователи вашего приложения, как потерянные туристы, находили страницы только по случайному изменению URL? Здесь на арену выходят Link и NavLink! Эти компоненты помогают создавать навигационные ссылки для переходов между страницами внутри вашего приложения.
Если вы до сих пор думаете, что можно "просто использовать теги <a>", то... ну да, можно, но это будет уничтожать состояние приложения и перезагружать всю страницу. В этом нет никакого удовольствия, ни вам, ни вашему пользователю, ни вашему боссу. Link и NavLink работают поверх механизма маршрутизатора, сохраняя SPA-природу приложения.
Link: первый шаг к дружелюбной навигации
Компонент Link из библиотеки react-router-dom — это обертка вокруг обычного HTML-тега <a>. Но, в отличие от <a>, при нажатии на ссылку через Link страница не будет перезагружаться. Вместо этого React просто обновляет состояние приложения, рендерит нужный компонент и всё это — быстро и без заметной глазу задержки.
Давайте посмотрим простой пример того, как использовать Link:
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
export const App: React.FC = () => {
return (
<Router>
<nav>
{/* Используем Link для навигации */}
<Link to="/">Главная</Link>
<Link to="/about">О нас</Link>
</nav>
<Switch>
<Route exact path="/">
<h1>Добро пожаловать на главную!</h1>
</Route>
<Route path="/about">
<h1>О компании</h1>
</Route>
</Switch>
</Router>
);
};
Вот ваш минимальный пример! При нажатии на "Главная" или "О нас" браузер обновит контент без перезагрузки страницы. Красота, правда?
Параметры компонента Link
Посмотрим, какие параметры можно передать в Link:
to— указывает путь, куда ведет ссылка. Это обязательный параметр.replace— заменяет текущую запись в истории маршрутов вместо добавления новой. Полезно, если вы не хотите, чтобы пользователь вернулся к предыдущей странице по кнопке "Назад".
Пример с replace:
<Link to="/profile" replace>
Профиль
</Link>
NavLink: магия активных ссылок
Если Link — это простая ссылка, то NavLink — это более "умная" ссылка. Она знает, какая страница в данный момент активна, и позволяет вам стилизовать активные ссылки.
Как использовать NavLink?
Работа с NavLink похожа на работу с Link:
import React from 'react';
import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
export const App: React.FC = () => {
return (
<Router>
<nav>
{/* Используем NavLink для навигации */}
<NavLink to="/" exact activeClassName="active-link">
Главная
</NavLink>
<NavLink to="/about" activeClassName="active-link">
О нас
</NavLink>
</nav>
<Switch>
<Route exact path="/">
<h1>Добро пожаловать на главную!</h1>
</Route>
<Route path="/about">
<h1>О компании</h1>
</Route>
</Switch>
</Router>
);
};Теперь, когда пользователь находится на определенной странице, соответствующая ссылка будет иметь CSS-класс active-link. Красиво и удобно!
Параметры компонента NavLink
Кроме параметров Link, у NavLink есть дополнительные свойства:
activeClassName— имя CSS-класса для активной ссылки.activeStyle— объект со стилями для активной ссылки.exact— указывает, что ссылка должна быть активна только при полном совпадении пути.isActive— функция для более сложной логики определения активного состояния.
Пример с activeStyle:
<NavLink
to="/contact"
activeStyle={{ fontWeight: 'bold', color: 'red' }}
>
Контакты
</NavLink>
Сравнение Link и NavLink
| Возможность | Link | NavLink |
|---|---|---|
| Переход между страницами | ✅ | ✅ |
| Стилизация активного состояния | ❌ | ✅ |
| Простой в использовании | ✅ | ✅ |
| Подходит для навигационных меню | ❌ | ✅ |
Используйте Link для ссылки, где не нужно отслеживать активное состояние, а NavLink — для навигационных меню, где пользователь должен видеть, на какой странице он находится.
Создание навигационного меню
Давайте сделаем полноценное меню для нашего небольшого приложения:
import React from 'react';
import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
export const App: React.FC = () => {
return (
<Router>
<header>
<nav>
<NavLink to="/" exact activeClassName="active" className="nav-link">
Главная
</NavLink>
<NavLink to="/about" activeClassName="active" className="nav-link">
О нас
</NavLink>
<NavLink to="/contact" activeClassName="active" className="nav-link">
Контакты
</NavLink>
</nav>
</header>
<main>
<Switch>
<Route exact path="/">
<h1>Добро пожаловать на главную страницу!</h1>
</Route>
<Route path="/about">
<h1>Страница "О нас"</h1>
</Route>
<Route path="/contact">
<h1>Страница "Контакты"</h1>
</Route>
</Switch>
</main>
</Router>
);
};И в CSS добавим немного магии:
.nav-link {
text-decoration: none;
margin: 0 10px;
color: black;
}
.nav-link.active {
font-weight: bold;
color: blue;
}Теперь ваше меню выглядит прилично, а активные ссылки легко выделяются.
Типичные ошибки и как их избежать
🚩 Ошибка 1: использование <a> вместо Link или NavLink.
Исправление простое: просто замените <a> на Link и не забудьте про to.
🚩 Ошибка 2: отсутствие exact в NavLink для корневого маршрута /.
Когда вы используете NavLink с корневым маршрутом /, он может считаться активным и для всех дочерних маршрутов. Чтобы избежать этого, добавляйте атрибут exact.
🚩 Ошибка 3: стилизовать ссылки, игнорируя классы или стили от NavLink.
Если не используете activeClassName или activeStyle, сложно будет понять, какая страница активна.
Теперь вы готовы создавать навигацию с помощью Link и NavLink. Их использование не только улучшает пользовательский опыт, но и делает ваш код чище и современнее. Вперёд, к созданию прекрасных приложений!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ