Программное навигирование в React router: альтернативы Link
Быстрый ответ
Для изменения маршрута в вашем приложении воспользуйтесь хуком useNavigate
из React Router версии 6. Вызывайте функцию navigate(PATH)
с указанным вами путем.
import { useNavigate } from 'react-router-dom';
function NavigateButton() {
const navigate = useNavigate();
const handleNavigation = () => {
navigate('/destination'); // Пример навигатора, navigate() отправляет нас на '/destination'
};
return <button onClick={handleNavigation}>Перейти</button>;
}
В этом примере функция navigate()
выполняет роль навигатора, способствующего переходу на новые страницы приложения, обходя потребность в использовании элемента <Link>
.
Классовые компоненты
Если вы все еще используете классовые компоненты, то возможно добавить навигацию при помощи HOC withRouter
и метода history.push()
. Управление непредвиденными ситуациями осуществляет props.history
.
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
navigateToProfile = () => {
this.props.history.push('/profile'); // Мы идем в направлении '/profile', пропуск не требуется!
}
render() {
return <button onClick={this.navigateToProfile}>Перейти в профиль</button>;
}
}
export default withRouter(MyComponent);
Примечание: withRouter
– это проверенный временем HOC из версии 4, который не вписывается в концепцию версии 6.
Переход вперед
Адаптация к изменениям может включать:
- Замену
this.props.history.push('/path')
наuseNavigate
. - Отказ от
withRouter
в пользу хуков при рефакторинге. - Следование официальным инструкциям по обновлению при существенных изменениях версий.
- Обновление
browserHistory
до более компактногоuseNavigate
.
Визуализация
Представим, что мы управляем кораблем (⛵), направляющимся к различным островам (🏝️):
⛵.navigate('/profile'); // Мы отправляемся на Профильный остров!
А React Router v6 становится нашим капитаном:
🕸️ [Остров Главной страница 🏝️🏠] -- navigate('/profile') --> [Профильный остров 🏝️👤]
React Router, в роли капитана, уверенно направляет нас по морю наших компонентов в приложении.
Определяем историю! Где ты?
Давайте разберемся с объектом history:
history.push('/path')
– это наша машина времени из версии 4, которая перемещает нас на новые страницы.history.replace('/path')
– это "резинка", которая не оставляет отметок о прошлых посещениях.- Пользовательский объекты history являются нашим навигационным "армейским ножом" в версии 4.
Все на борт обработчика событий
Управление навигационным потоком может быть осуществлено с помощью обработчиков событий:
- Перенаправление после отправки форм или нажатия кнопок.
- Переходы после завершения асинхронных запросов, например, загрузки данных.
- Защита маршрутов от доступа неавторизованных пользователей.
Делиться – заботиться
Для сложных приложений может быть полезным использование общего объекта history:
// history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
Данный модульный подход удобен для контроля навигации программным способом, но его популярность уменьшилась с приходом v6.
Тайная навигация: Автоматические триггеры
Иногда навигация требует невидимой руки:
- Перенаправление после устранения элемента из списка.
- Автоматизация переходов в ответ на изменения состояния.
- Переадресация пользователей после изменений в системе аутентификации.
Полезные материалы
- React Router: Декларативная маршрутизация для React.js — Обзор использования
useHistory
. - JavaScript – Как программно управлять навигацией в React Router? – Stack Overflow — Практические рекомендации и ответы по вопросам программной навигации в React Router.
- React Router: Декларативная маршрутизация для React.js — Руководство по использованию
useParams
. - Medium — Статьи с примерами использования программной навигации в React.
- Just a moment... — Примеры использования программной навигации в React Router на CodeSandbox.