How to perform go back function in React

Question

I am using react-router v.4 and I would like to perform some go back function.

My current code looks as below:

<HashRouter>
       <Switch>
            <Route exact path='/' component={Main}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/traineeships' render={()=>(<Traineeship rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/information-filter' render={()=>(<InformationFilter rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/find-work' render={()=>(<FindWork rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/information-job' render={()=>(<InformationJob rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Redirect from='*' to='/' />
       </Switch>

I tried several options like this.props.history.go(-1) on other components but I was getting undefined errors.

Anyone knows how to perform go back function in my case?

@VicJordan I get Uncaught TypeError: Cannot read property 'goBack' of undefined when i am doing same as the answer on that duplicate quetsion! — Mizlul, May 29 '18 at 08:22
are you using `withRouter` for your pages? https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md — Evgeny Timoshenko, May 29 '18 at 08:23

score 7 · Accepted Answer · answered May 29 '18 at 08:27

You could use withRouter, if you need to access history object:

import React from 'react'
import { withRouter } from 'react-router'

class SecondView extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.history.go(-1)} />
    )
  }
}

const SecondViewnWithRouter = withRouter(SecondView)

withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

GibboK · Answer 2 · 2018-05-29T08:47:43.853

0

Depending on the the version of react-router (in this case 3.0) you could enable BrowserHistory firstand do:

const BrowserHistory = require('react-router/lib/BrowserHistory').default;

and you could use it in JSX:

<button onClick={BrowserHistory.goBack}>Back</button>

And this code in your App file:

<Router history={BrowserHistory}>
    <Route path="/" component={App} />
</Router>

edited May 29 '18 at 08:47

answered May 29 '18 at 08:25

GibboK

64,078
128
380
620

I am getting Error: Cannot find module "react-router/lib/BrowserHistory" – Mizlul May 29 '18 at 08:36
@Mizlul I did not notice you are using v4 :) – GibboK May 29 '18 at 08:48

How to perform go back function in React

2 Answers2