Программное навигирование в 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.

Тайная навигация: Автоматические триггеры

Иногда навигация требует невидимой руки:

• Перенаправление после устранения элемента из списка.
• Автоматизация переходов в ответ на изменения состояния.
• Переадресация пользователей после изменений в системе аутентификации.

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

1. React Router: Декларативная маршрутизация для React.js — Обзор использования useHistory.
2. JavaScript – Как программно управлять навигацией в React Router? – Stack Overflow — Практические рекомендации и ответы по вопросам программной навигации в React Router.
3. React Router: Декларативная маршрутизация для React.js — Руководство по использованию useParams.
4. Medium — Статьи с примерами использования программной навигации в React.
5. Just a moment... — Примеры использования программной навигации в React Router на CodeSandbox.