Перенаправление обратно на предыдущую страницу по щелчку мыши в React Router

Чтобы перенаправить обратно на предыдущую страницу по клику с помощью React Router, вы можете использовать несколько методов. Вот некоторые из часто используемых подходов:

  1. API истории: вы можете использовать объект history, предоставленный React Router, чтобы вернуться на предыдущую страницу. Этого можно добиться с помощью метода goBack(). Вот пример:
import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  const handleGoBack = () => {
    history.goBack();
  };
  return (
    <button onClick={handleGoBack}>Go Back</button>
  );
}
  1. Route Props: если вы визуализируете свой компонент как прямой дочерний элемент компонента Route, вы можете получить доступ к объекту historyчерез propsи используйте метод goBack(), как показано ниже:
function MyComponent(props) {
  const handleGoBack = () => {
    props.history.goBack();
  };
  return (
    <button onClick={handleGoBack}>Go Back</button>
  );
}
  1. withRouter HOC: Если ваш компонент не отображается напрямую компонентом Route, вы можете использовать компонент высшего порядка withRouter(HOC) для внедрения
  2. withRouter. code>historyв реквизиты вашего компонента. Вот пример:
import { withRouter } from 'react-router-dom';
function MyComponent(props) {
  const handleGoBack = () => {
    props.history.goBack();
  };
  return (
    <button onClick={handleGoBack}>Go Back</button>
  );
}
export default withRouter(MyComponent);

Используя любой из этих методов, вы можете включить событие onclick для запуска перенаправления обратно на предыдущую страницу с помощью React Router.