react-router go back a page how do you configure history

Question

Can anyone please tell me how I can go back to the previous page rather than a specific route   When using this code   var BackButton   React createClass     mixins   Router Navigation     render  function         return            lt button             className  button icon-left              onClick  this navigateBack  gt              Back          lt  button gt                 navigateBack  function        this goBack              Get this error  goBack   was ignored because there is no router history  Here are my routes      Routing Components Route   Router Route  RouteHandler   Router RouteHandler  DefaultRoute   Router DefaultRoute   var routes       lt Route name  app  path     handler  OurSchoolsApp  gt        lt DefaultRoute name  home  handler  HomePage    gt        lt Route name  add-school  handler  AddSchoolPage     gt        lt Route name  calendar  handler  CalendarPage     gt        lt Route name  calendar-detail  path  calendar-detail  id  handler  CalendarDetailPage    gt        lt Route name  info-detail  path  info-detail  id  handler  InfoDetailPage    gt        lt Route name  info  handler  InfoPage    gt        lt Route name  news  handler  NewsListPage    gt        lt Route name  news-detail  path  news-detail  id  handler  NewsDetailPage    gt        lt Route name  contacts  handler  ContactPage    gt        lt Route name  contact-detail  handler  ContactDetailPage    gt        lt Route name  settings  handler  SettingsPage    gt    lt  Route gt        Router run routes  function Handler      var mountNode   document getElementById  app       React render  lt Handler   gt    mountNode

User · Answer

The only solution that worked for me was the most simple  No additional imports needed    lt a href     onClick       gt  this props history goBack    gt Back lt  a gt    Tks  IamMHussain

User · Answer

In react-router v4 x you can use history goBack which is equivalent to history go -1    App js  import React from  react   import   render   from  react-dom   import   BrowserRouter as Router  Route  Link   from  react-router-dom   import Home from    Home   import About from    About   import Contact from    Contact   import Back from    Back    const styles       fontFamily   sans-serif     textAlign   left      const App        gt       lt div style  styles  gt       lt Router gt         lt div gt           lt ul gt             lt li gt  lt Link to     gt Home lt  Link gt  lt  li gt             lt li gt  lt Link to   about  gt About lt  Link gt  lt  li gt             lt li gt  lt Link to   contact  gt Contact lt  Link gt  lt  li gt           lt  ul gt            lt hr   gt            lt Route exact path     component  Home    gt           lt Route path   about  component  About    gt           lt Route path   contact  component  Contact    gt            lt Back   gt      lt ----- This is component that will render Back button            lt  div gt       lt  Router gt     lt  div gt      render  lt App   gt   document getElementById  root       Back js  import React from  react   import   withRouter   from  react-router-dom    const Back      history      gt       lt button onClick  history goBack  gt Back to previous page lt  button gt      export default withRouter Back     Demo  https   codesandbox io s ywmvp95wpj  Please remember that by using history your users can leave because history goBack   can load a page that visitor has visited before opening your application     To prevent such situation as described above  I ve created a simple library react-router-last-location that watch your users last location   Usage is very straight forward  First you need to install react-router-dom and react-router-last-location from npm   npm install react-router-dom react-router-last-location --save   Then use LastLocationProvider as below   App js  import React from  react   import   render   from  react-dom   import   BrowserRouter as Router  Route  Link   from  react-router-dom   import   LastLocationProvider   from  react-router-last-location                                                                     Import provider    import Home from    Home   import About from    About   import Contact from    Contact   import Back from    Back    const styles       fontFamily   sans-serif     textAlign   left      const App        gt       lt div style  styles  gt       lt h5 gt Click on About to see your last location lt  h5 gt       lt Router gt         lt LastLocationProvider gt      lt ---- Put provider inside  lt Router gt               lt div gt             lt ul gt               lt li gt  lt Link to     gt Home lt  Link gt  lt  li gt               lt li gt  lt Link to   about  gt About lt  Link gt  lt  li gt               lt li gt  lt Link to   contact  gt Contact lt  Link gt  lt  li gt             lt  ul gt              lt hr   gt              lt Route exact path     component  Home    gt             lt Route path   about  component  About    gt             lt Route path   contact  component  Contact    gt              lt Back   gt           lt  div gt         lt  LastLocationProvider gt       lt  Router gt     lt  div gt      render  lt App   gt   document getElementById  root       Back js  import React from  react   import   Link   from  react-router-dom   import   withLastLocation   from  react-router-last-location                                                                   withLastLocation  higher order component       will pass  lastLocation  to your component                                                                                        const Back      lastLocation      gt      lastLocation  amp  amp   lt Link to  lastLocation         gt Back to previous page lt  Link gt                   Remember to wrap      your component before exporting                                                                         export default withLastLocation Back     Demo  https   codesandbox io s 727nqm99jj

User · Answer

One Line Answer  window history back

User · Answer

ES6 method without mixins using react-router  stateless function   import React from  react  import   browserHistory   from  react-router   export const Test        gt       lt div className    gt       lt button onClick  browserHistory goBack  gt Back lt  button gt     lt  div gt

User · Answer

What worked for me was to import withRouter at the top of my file   import   withRouter   from  react-router-dom    Then use it to wrap the exported function at the bottom of my file   export default withRouter WebSitePageTitleComponent    Which then allowed me to access the Router s history prop  Full sample code below   import React    Component   from  react  import   withRouter   from  react-router-dom   import PropTypes from  prop-types   class TestComponent extends Component     constructor props        super props      this handleClick   this handleClick bind this         handleClick         event preventDefault       this props history goBack          render         return          lt div className  page-title  gt           lt a className  container  href   location  onClick  this handleClick  gt             lt h1 className  page-header  gt                this props title              lt  h1 gt           lt  a gt         lt  div gt               const   string  object     PropTypes  TestComponent propTypes       title  string isRequired    history  object    export default withRouter TestComponent

User · Answer

React Router v6 useNavigate Hook is the recommended way to go back now  import   useNavigate   from  react-router-dom    function App       const navigate   useNavigate       return        lt  gt         lt button onClick       gt  navigate -1   gt go back lt  button gt         lt button onClick       gt  navigate 1   gt go forward lt  button gt       lt   gt          Codesandbox sample Go back forward multiple history stack entries   lt button onClick       gt  navigate -2   gt go two back lt  button gt   lt button onClick       gt  navigate 2   gt go two forward lt  button gt   Go to specific route  navigate  quot users quot      go to users route  like history push navigate  quot users quot     replace  true       go to users route  like history replace navigate  quot users quot     state       go to users route  pass some state in  useNavigate replaces useHistory to support upcoming React Suspense Concurrent mode better

User · Answer

This is a working BackButton component  React 0 14    var React   require  react    var Router   require  react-router     var History   Router History   var BackButton   React createClass     mixins    History      render  function         return          lt button className  back  onClick  this history goBack  gt  this props children  lt  button gt                  module exports   BackButton    You can off course do something like this if there is no history    lt button className  back  onClick  goBack  gt  this props children  lt  button gt   function goBack e      if     no history           e preventDefault        else       this history goBack

User · Answer

This works with Browser and Hash history   this props history goBack

User · Answer

Using React Hooks Import  import   useHistory   from  quot react-router-dom quot    In stateless component  let history   useHistory     On Event history goBack

User · Answer

Call the following component like so    lt BackButton history  this props history    gt    And here is the component   import React    Component   from  react  import PropTypes from  prop-types  class BackButton extends Component     constructor         super    arguments       this goBack   this goBack bind this         render         return          lt button         onClick  this goBack  gt            Back        lt  button gt               goBack         this props history goBack          BackButton propTypes       history  PropTypes object     export default BackButton   I m using    react    15 6 1   react-router    4 2 0

User · Answer

This piece of code will do the trick for you       this context router history goBack

User · Answer

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

User · Answer

Check out my working example using React 16 0 with React-router v4 Live Example  check out the code Github    Use withRouter and history goBack    This is the idea I am implementing     History js  import React    Component   from  react   import   withRouter   from  react-router-dom  import    App css    class History extends Component      handleBack        gt        this props history goBack          handleForward        gt        console log this props history      this props history go  1         render         return  lt div className  container  gt         lt div className  row d-flex justify-content-between  gt           lt span onClick  this handleBack  className  d-flex justify-content-start button  gt             lt i className  fas fa-arrow-alt-circle-left fa-5x  gt  lt  i gt           lt  span gt           lt span onClick  this handleForward  className  d-flex justify-content-end button  gt             lt i className  fas fa-arrow-alt-circle-right fa-5x  gt  lt  i gt           lt  span gt         lt  div gt       lt  div gt         export default withRouter History    PageOne js  import React    Fragment  Component   from  react   class PageOne extends Component       componentDidMount          if this props location state  amp  amp  this props location state from      pageone         this props history push            pathname    pageone            state                  from  this props location pathname                                render           return             lt Fragment gt               lt div className  container-fluid  gt                  lt div className  row d-flex justify-content-center  gt                     lt h2 gt Page One lt  h2 gt                  lt  div gt               lt  div gt            lt  Fragment gt                  export default PageOne   p s  sorry the code is to big to post it all here

User · Answer

Go back to specific page    import   useHistory   from  quot react-router-dom quot      const history   useHistory         const routeChange        gt        let path     login       history push path         Go back to previous page    import   useHistory   from  quot react-router-dom quot      const history   useHistory         const routeChange        gt        history goBack

User · Answer

this context router goBack     No navigation mixin required

User · Answer

Update with React v16 and ReactRouter v4 2 0  October 2017    class BackButton extends Component     static contextTypes         router       gt  true     replace with PropTypes object if you use them        render         return          lt button         className  button icon-left          onClick  this context router history goBack  gt            Back        lt  button gt                Update with React v15 and ReactRouter v3 0 0  August 2016    var browserHistory   ReactRouter browserHistory   var BackButton   React createClass     render  function         return          lt button         className  button icon-left          onClick  browserHistory goBack  gt          Back        lt  button gt                   Created a fiddle with a little bit more complex example with an embedded iframe  https   jsfiddle net kwg1da3a   React v14 and ReacRouter v1 0 0  Sep 10  2015   You can do this   var React   require  react    var Router   require  react-router     var SomePage   React createClass            contextTypes        router  React PropTypes func               handleClose  function          if  Router History length  gt  1             this will take you back if there is history       Router History back          else            this will take you to the parent route if there is no history           but unfortunately also add it as a new route       var currentRoutes   this context router getCurrentRoutes          var routeName   currentRoutes currentRoutes length - 2  name        this context router transitionTo routeName                      You need to be careful that you have the necessary history to go back  If you hit the page directly and then hit back it will take you back in the browser history before your app   This solution will take care of both scenarios  It will  however  not handle an iframe that can navigate within the page  and add to the browser history   with the back button  Frankly  I think that is a bug in the react-router  Issue created here  https   github com rackt react-router issues 1874

User · Answer

I think you just need to enable BrowserHistory on your router by intializing it like that    lt Router history  new BrowserHistory  gt    Before that  you should require BrowserHistory from  react-router lib BrowserHistory   I hope that helps    UPDATE   example in ES6  const BrowserHistory   require  react-router lib BrowserHistory   default   const App   React createClass       render       gt            return                lt div gt  lt button onClick  BrowserHistory goBack  gt Go Back lt  button gt  lt  div gt                        React render        lt Router history  BrowserHistory  gt           lt Route path     component  App    gt       lt  Router gt     document body

User · Answer

According to https   reacttraining com react-router web api history  For  react-router-dom     5 1 2      const   history     this props   lt Button onClick  history goBack  gt    Back  lt  Button gt    YourComponent propTypes       history  PropTypes shape       goBack  PropTypes func isRequired       isRequired

User · Answer

import   withRouter   from  react-router-dom   this props history goBack      I am using these versions    react     15 6 1    react-dom     15 6 1    react-router     4 2 0    react-router-dom     4 2 2

User · Answer

REDUX   You can also use react-router-redux which has goBack   and push     Here is a sampler pack for that   In your app s entry point  you need ConnectedRouter  and a sometimes tricky connection to hook up is the history object  The Redux middleware listens to history changes   import React from  react  import   render   from  react-dom  import   ApolloProvider   from  react-apollo  import   Provider   from  react-redux  import   ConnectedRouter   from  react-router-redux  import client from    components apolloClient  import store    history   from    store  import Routes from    Routes  import    index css   render     lt ApolloProvider client  client  gt       lt Provider store  store  gt         lt ConnectedRouter history  history  gt           lt Routes   gt         lt  ConnectedRouter gt       lt  Provider gt     lt  ApolloProvider gt     document getElementById  root        I will show you a way to hook up the history  Notice how the history is imported into the store and also exported as a singleton so it can be used in the app s entry point   import   createStore  applyMiddleware  compose   from  redux  import   routerMiddleware   from  react-router-redux  import thunk from  redux-thunk  import createHistory from  history createBrowserHistory  import rootReducer from    reducers   export const history   createHistory    const initialState      const enhancers      const middleware    thunk  routerMiddleware history    if  process env NODE ENV      development       const   devToolsExtension     window   if  typeof devToolsExtension      function         enhancers push devToolsExtension           const composedEnhancers   compose applyMiddleware    middleware      enhancers  const store   createStore rootReducer  initialState  composedEnhancers   export default store   The above example block shows how to load the react-router-redux middleware helpers which complete the setup process   I think this next part is completely extra  but I will include it just in case someone in the future finds benefit   import   combineReducers   from  redux  import   routerReducer as routing   from  react-router-redux   export default combineReducers     routing  form       I use routerReducer all the time because it allows me to force reload Components that normally do not due to shouldComponentUpdate  The obvious example is when you have a Nav Bar that is supposed to update when a user presses a NavLink button  If you go down that road  you will learn that Redux s connect method uses shouldComponentUpdate  With routerReducer  you can use mapStateToProps to map routing changes into the Nav Bar  and this will trigger it to update when the history object changes   Like this   const mapStateToProps      routing      gt     routing     export default connect mapStateToProps  Nav    Forgive me while I add some extra keywords for people  if your component isn t updating properly  investigate shouldComponentUpdate by removing the connect function and see if it fixes the problem  If so  pull in the routerReducer and the component will update properly when the URL changes   In closing  after doing all that  you can call goBack   or push   anytime you want   Try it now in some random component    Import in connect   You don t even need mapStateToProps or mapDispatchToProps Import in goBack and push from react-router-redux Call this props dispatch goBack    Call this props dispatch push   sandwich    Experience positive emotion   If you need more sampling  check out  https   www npmjs com package react-router-redux

User · Answer

For react-router v2 x this has changed  Here s what I m doing for ES6   import React from  react   import FontAwesome from  react-fontawesome   import   Router  RouterContext  Link  browserHistory   from  react-router    export default class Header extends React Component      render         return          lt div id  header  gt           lt div className  header-left  gt                          this props hasBackButton  amp  amp               lt FontAwesome name  angle-left  className  back-button  onClick  this context router goBack    gt                       lt  div gt           lt div gt  this props title  lt  div gt         lt  div gt               Header contextTypes       router  React PropTypes object     Header defaultProps       hasBackButton  true     Header propTypes       title  React PropTypes string

User · Answer

import withRouter  import   withRouter   from  react-router-dom    Export your component as   export withRouter nameofcomponent    Example  on button click  call goBack    lt button onClick  this props history goBack  gt Back lt  button gt     Tested on react-router-dom v4 3

[javascript] react-router go back a page how do you configure history?

Examples related to javascript

Examples related to reactjs

Examples related to react-router