Навигация вместо использования History.goBack() в компонентах класса React Router v6

React Router — популярная библиотека для управления навигацией в приложениях React. С выпуском React Router v6 произошли некоторые изменения в управлении навигацией по сравнению с предыдущими версиями. В этой статье мы рассмотрим альтернативные методы навигации в компонентах класса React Router v6, уделяя особое внимание альтернативам методу history.goBack().

  1. Использование хука useNavigate:
    React Router v6 представил хук useNavigate, который обеспечивает возможность программной навигации, не полагаясь на historyобъект. Вот пример того, как использовать его в компоненте класса:
import { useNavigate } from 'react-router-dom';
class MyComponent extends React.Component {
  navigateToHome = () => {
    const navigate = useNavigate();
    navigate('/');
  }
  render() {
    return (
      <button onClick={this.navigateToHome}>Go to Home</button>
    );
  }
}
  1. Использование компонента Link.
    Другой подход — использовать компонент Link, предоставляемый React Router v6. Он позволяет создавать кликабельные ссылки, которые запускают навигацию. Вот пример:
import { Link } from 'react-router-dom';
class MyComponent extends React.Component {
  render() {
    return (
      <Link to="/home">Go to Home</Link>
    );
  }
}
  1. Использование хука useHistory:
    Хотя history.goBack()не рекомендуется использовать в компонентах класса React Router v6, вы все равно можете использовать useHistoryперехватчик для доступа к объекту historyи навигации с использованием его методов. Вот пример:
import { useHistory } from 'react-router-dom';
class MyComponent extends React.Component {
  navigateToHome = () => {
    const history = useHistory();
    history.push('/home');
  }
  render() {
    return (
      <button onClick={this.navigateToHome}>Go to Home</button>
    );
  }
}

React Router v6 представляет альтернативные методы навигации по компонентам классов, отходя от подхода history.goBack(). Используя крючок useNavigate, компонент Linkили крючок useHistory, вы можете добиться более эффективной и надежной программной навигации.