React Router history.goBack не работает при использовании

Question

В приложении React я использую Router вот так:

let path='/';
if(condition){
   path='/dashboard'
}else if(condition){
   path='/login'
}

<Router>
 <Redirect to={path} />
   <Switch>
      <Route path="/dashboard"><Dashboard /></Route>
      <Route path="/login"><Login /></Route>
    </Switch>
</Router>

Это отлично работает. Но я хочу реализовать Back Button на каждой странице для перемещения по страницам. Я делаю это:

// The login.jsx component
function Post(props) {
  return (
    <div>
      <button type="button" onClick={() => props.history.goBack()}>
        Go back
      </button>
    </div>
  );
}

Но получаю такую ​​ошибку:

Uncaught TypeError: Cannot read property 'goBack' of undefined

Затем я использую другой подход. Я использую useHistory:

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

// The login.jsx component
function Post(props) {
  let history = useHistory();
  
  return (
    <div>
      <button type="button" onClick={() => history.goBack()}>
        Go back
      </button>
    </div>
  );
}

И на этот раз, когда я нажимаю кнопку Go Back, ничего не происходит!

Если я проделываю эту процедуру с <Link/>, все работает нормально. Но когда я использую подход <Redirect />, он не работает. есть ли альтернатива моему подходу к перенаправлению? или есть какое-то решение для нынешнего подхода? спасибо.

Answer 1

Чтобы перенаправления включались в историю, используйте push

<Redirect push to={path} />

Дополнительная информация здесь из документов