In a React App, I use Router like this:

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>

This works fine. But I want to implement a Back Button in each page to move along pages. I do this:

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

But I get this error:

Uncaught TypeError: Cannot read property 'goBack' of undefined

Then I follow another approach. I use useHistory:

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

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

And this time when I click on the Go Back button, nothing happens!

If I do this procedures with <Link/> it works fine. But when I use <Redirect /> approach, it doesn't work. is there any alternative to my redirect approach? or is there any solution to current approach? thanks.

In a React App, I use Router like this:

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>

This works fine. But I want to implement a Back Button in each page to move along pages. I do this:

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

But I get this error:

Uncaught TypeError: Cannot read property 'goBack' of undefined

Then I follow another approach. I use useHistory:

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

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

And this time when I click on the Go Back button, nothing happens!

If I do this procedures with <Link/> it works fine. But when I use <Redirect /> approach, it doesn't work. is there any alternative to my redirect approach? or is there any solution to current approach? thanks.

• javascript
• reactjs
• react-router
• react-router-dom

• 1 The way of using useHistory() is correct but the problem is you have to fill the history stack in order for goBack() to work. If there is nothing in the stack, goBack() goes nowhere. So you have to first push your redirects to Router history. – wr93_ Commented Jul 12, 2020 at 13:14

1 Answer 1

For redirects to be included in the history, use push

<Redirect push to={path} />

More information here from the docs