react-router v4 how to go back

Question

Trying to figure out how can I go back to the previous page  I am using  react-router-v4  1   This is the code I have configured in my first landing page    lt Router gt     lt div gt       lt Link to     gt  lt div className  routerStyle  gt  lt Glyphicon glyph  home    gt  lt  div gt  lt  Link gt       lt Route exact path     component  Page1   gt       lt Route path   Page2  component  Page2   gt       lt Route path   Page3  component  Page3   gt     lt  div gt   lt  Router gt    In order to forward to subsequent pages  I simply do   this props history push   Page2      However  how can I go back to previous page   Tried few things like mentioned below but no luck  1  this props history goBack     Gives error       TypeError  null is not an object  evaluating  this props      this context router goBack      Gives error       TypeError  null is not an object  evaluating  this context      this props history push         Gives error       TypeError  null is not an object  evaluating  this props     Posting the Page1 code here below   import React   Component  from  react   import  Button  from  react-bootstrap    class Page1 extends Component     constructor props        super props       this handleNext   this handleNext bind this           handleNext         this props history push   page2           handleBack         this props history push                       Main render method of this class         render         return          lt div gt              some component code                lt div className  navigationButtonsLeft  gt             lt Button onClick  this handleBack  bsStyle  success  gt  amp lt  Back lt  Button gt           lt  div gt           lt div className  navigationButtonsRight  gt             lt Button onClick  this handleNext  bsStyle  success  gt Next  amp gt  lt  Button gt           lt  div gt          lt  div gt               export default Page1

User · Answer

You can use history goBack   in functional component  Just like this  import   useHistory   from  react-router   const component        gt       const history   useHistory       return       lt button onClick       gt  history goBack    gt Previous lt  button gt

User · Answer

I think the issue is with binding   constructor props      super props      this goBack   this goBack bind this      i think you are missing this    goBack        this props history goBack               lt button onClick  this goBack  gt Go Back lt  button gt    As I have assumed before you posted the code   constructor props        super props       this handleNext   this handleNext bind this       this handleBack   this handleBack bind this      you are missing this line

User · Answer

Can you provide the code where you use this props history push   Page2      Have you tried the goBack   method   this props history goBack     It s listed here https   reacttraining com react-router web api history  With a live example here https   reacttraining com react-router web example modal-gallery

User · Answer

Hope this will help someone   import React from  react   import   as History from  history   import   withRouter   from  react-router-dom    interface Props     history  History      withRouter export default class YourComponent extends React PureComponent lt Props gt       private onBackClick    event  React MouseEvent   void   gt        const   history     this props      history goBack

User · Answer

Try    this props router goBack

User · Answer

this props history goBack      This is the correct solution for react-router v4  But one thing you should keep in mind is that you need to make sure this props history is existed   That means you need to call this function this props history goBack    inside the component that is wrapped by  lt  Route    If you call this function in a component that deeper in the component tree  it will not work   EDIT   If you want to have history object in the component that is deeper in the component tree  which is not wrapped by  lt  Route    you can do something like this       import  withRouter  from  react-router-dom    class Demo extends Component                  Inside this you can use this props history goBack       export default withRouter Demo

User · Answer

Maybe this can help someone   I was using history replace   to redirect  so when i tried to use history goBack    i was send to the previous page before the page i was working with  So i changed the method history replace   to history push   so the history could be saved and i would be able to go back

User · Answer

I am not sure if anyone else ran into this problem or may need to see this  But I spent about 3 hours trying to solve this issue  I wanted to implement a simple goBack   on the click of a button  I thought I was off to a good start because my App js was already wrapped in the Router and I was importing   BrowserRouter as Router   from  react-router-dom       Since the Router element allows me to assess the history object  ex  import React from  react   import    App css   import Splash from    components Splash   import Header from    components Header js   import Footer from    components Footer   import Info from    components Info   import Timer from    components Timer   import Options from    components Options   import   BrowserRouter as Router  Route   from  react-router-dom   function App       return        lt Router gt         lt Header   gt         lt Route path     component  Splash  exact   gt         lt Route path   home  component  Info  exact   gt         lt Route path   timer  component  Timer  exact   gt         lt Route path   options  component  Options  exact   gt         lt Footer   gt       lt  Router gt         export default App   BUT the trouble was on my Nav  a child component  module  I had to  import   withRouter   from  react-router-dom    and then force an export with  export default withRouter Nav    ex  import React from  react   import   withRouter   from  react-router-dom   class Nav extends React Component       render             return                lt div gt                   lt label htmlFor  back  gt  lt  label gt                   lt button id  back  onClick        gt  this props history goBack     gt Back lt  button gt                   lt label htmlFor  logOut  gt  lt  label gt                   lt button id  logOut   gt  lt a href      gt Log-Out lt  a gt               lt  button gt               lt  div gt                     export default withRouter Nav    in summary  withRouter was created because of a known issue in React where in certain scenarios when inheritance from a router is refused  a forced export is necessary

User · Answer

For use with React Router v4 and a functional component anywhere in the dom-tree   import React from  react   import   withRouter   from  react-router-dom    const GoBack      history      gt   lt img src    images back png  onClick       gt  history goBack    alt  Go back    gt    export default withRouter GoBack

User · Answer

Here is the cleanest and simplest way you can handle this problem  which also nullifies the probable pitfalls of the this keyword  Use functional components  import   withRouter   from  quot react-router-dom quot   wrap your component or better App js with the withRouter   HOC this makes history to be available  quot app-wide quot   wrapping your component only makes history available for that specific component    your choice  So you have   export default withRouter App    In a Redux environment  export default withRouter  connect mapStateToProps     lt  -- your action creators -- gt    App      you should even be able to user history from your action creators this way    in your component do the following  import  useHistory  from  quot react-router-dom quot   const history   useHistory        do this inside the component goBack        gt  history goBack     lt btn btn-sm btn-primary onclick  goBack  gt Go Back lt  btn gt  export default DemoComponent  Gottcha useHistory is only exported from the latest v5 1 react-router-dom so be sure to update the package  However  you should not have to worry  about the many snags of the this keyword  You can also make this a reusable component to use across your app   function BackButton   children        let history   useHistory     return        lt button type  quot button quot  onClick       gt  history goBack    gt         children       lt  button gt           Cheers

User · Answer

Each answer here has parts of the total solution  Here s the complete solution that I used to get it to work inside of components deeper than where Route was used   import React    Component   from  react  import   withRouter   from  react-router-dom      You need that second line to import function and to export component at bottom of page   render       return              lt div onClick       gt  this props history goBack    gt GO BACK lt  div gt            Required the arrow function vs simply onClick  this props history goBack     export default withRouter MyPage      wrap your component s name with  withRouter

User · Answer

Simply use   lt span onClick       gt  this props history goBack    gt Back lt  span gt

[javascript] react-router (v4) how to go back?

Examples related to javascript

Examples related to reactjs

Examples related to react-router-v4