React Router — это мощная библиотека, которая позволяет разработчикам управлять маршрутизацией в своих приложениях React. Он предоставляет различные инструменты и методы для навигации между различными страницами или представлениями. Двумя наиболее часто используемыми методами навигации являются useHistory и props.history. В этой статье мы рассмотрим разницу между этими двумя методами и приведем примеры кода, демонстрирующие их использование.

Понимание useHistory:
Хук useHistory — это функция, представленная в React Router 5.1.0. Это специальный крючок, который обеспечивает доступ к объекту истории, позволяя вам программно перемещаться по приложению. Объект истории представляет текущий URL-адрес и предоставляет методы для управления историей браузера.

Чтобы использовать useHistory, вам необходимо импортировать его из пакета react-router-domи вызвать внутри функционального компонента. Вот пример:

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  const handleClick = () => {
    history.push('/new-route');
  };
  return (
    <button onClick={handleClick}>Go to new route</button>
  );
}

В приведенном выше коде хук useHistoryиспользуется для доступа к объекту истории. Метод pushвызывается для объекта истории для перехода к пути «/new-route» при нажатии кнопки.

Понимание props.history:
В React Router доступ к объекту historyтакже можно получить через объект props, передаваемый компонентам, отображаемым маршрутизатором. Объект historyдоступен как свойство с именем history. Этот подход обычно используется в компонентах классов или при использовании шаблона рендеринга.

Вот пример использования props.historyв компоненте класса:

import React, { Component } from 'react';
class MyComponent extends Component {
  handleClick() {
    this.props.history.push('/new-route');
  }
  render() {
    return (
      <button onClick={this.handleClick}>Go to new route</button>
    );
  }
}

В приведенном выше коде props.history.pushиспользуется для перехода к пути «/new-route» при нажатии кнопки. Доступ к объекту historyосуществляется через объект props, предоставленный компоненту класса.

Основное различие между useHistory и props.history заключается в способе доступа к ним. useHistory — это перехватчик, который позволяет функциональным компонентам получать доступ к объекту истории, а доступ к props.history осуществляется через объект propsв компонентах класса или при использовании шаблона render prop.

Оба метода предоставляют схожие функциональные возможности для навигации внутри приложения React Router. Выбор между ними зависит от типа компонента и предпочтительного шаблона кодирования (функционала или класса).

Поняв разницу между этими двумя методами, вы сможете эффективно использовать React Router для управления навигацией в ваших приложениях и создания удобного пользовательского опыта.