История goBack не работает в функциональном компоненте

Question

Я не могу создать кнопку, которая отправляет пользователя на предыдущую страницу, и я не знаю почему, я уже сделал это в компоненте класса и работает, но знаю, что пытаюсь сделать это в компонент функции, и он вылетает

См. код:

import React, { Fragment } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import Header from "../components/recursableComponents/Header";
import { BASE_URL } from "../consts";

    function Collections(props) {
  const { classes } = props;
  const [collections, setCollection] = useState([]);
  const [choosedCollection, setChoosedCollection] = useState("");

  const getCollections = () => {
    const user = new User();
    const id_marca_estilo = user.user.id_marca_estilo;

  return (
    <Fragment>
      <Header
        title="Coleções"
        rightIcon={null}
        leftIcon={
          <IconButton
            aria-label="upload picture"
            component="span"
            className={classes.whiteButton}
            onClick={() => props.history.goBack()}
          >
            <ArrowBack></ArrowBack>
          </IconButton>
        }
      />

Answer 1

Я предполагаю, что вы используете v5 + response-router-dom

Вы должны использовать хук useHistory следующим образом

import { useHistory } from 'react-router-dom';

Затем в ваш функциональный компонент

const history = useHistory();

Наконец onClick={() => history.goBack()}

Answer 2

Пожалуйста, проверьте этот пример

import React from "react";
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {withRouter} from "react-router";

export default function RoutingGoBackExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/about/insideabout">Inside About</Link>
                    </li>
                </ul>
                <hr/>
                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route exact path="/about">
                        <About/>
                    </Route>
                    <Route path="/about/insideabout">
                        <InsideAbout/>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

const About = withRouter(({history, ...props}) => (
    <div>
        <h1>
            About
            <hr/>
            <button onClick={() => {
                // history.push('/')
                history.goBack(-1);
            }}>go back
            </button>
        </h1>
    </div>
));

const InsideAbout = withRouter(({history, ...props}) => (
    <h1 {...props}>
        Inside About
        <hr/>

        <button onClick={() => {
            history.goBack();
        }}>go back
        </button>
        <button onClick={() => {
            history.go(-2);
        }}>go home
        </button>
    </h1>
));

Подробнее

Answer 3

Если вы используете реактивный маршрутизатор, вы можете получить доступ к истории с помощью ловушки:

import { useHistory } from "react-router-dom";

// (...)

function Collections(props) {
  const history = useHistory(); // <=============


  const { classes } = props;
  const [collections, setCollection] = useState([]);
  const [choosedCollection, setChoosedCollection] = useState("");

  const getCollections = () => {
    const user = new User();
    const id_marca_estilo = user.user.id_marca_estilo;

  return (
    <Fragment>
      <Header
        title="Coleções"
        rightIcon={null}
        leftIcon={
          <IconButton
            aria-label="upload picture"
            component="span"
            className={classes.whiteButton}
            onClick={() => history.goBack()}
          >
            <ArrowBack></ArrowBack>
          </IconButton>
        }
      />

Более подробную информацию можно найти в документации: https://reacttraining.com/react-router/web/api/Hooks/usehistory