How to push to History in React Router v4

Question

In the current version of React Router  v3  I can accept a server response and use browserHistory push to go to the appropriate response page  However  this isn t available in v4  and I m not sure what the appropriate way to handle this is   In this example  using Redux  components app-product-form js calls this props addProduct props  when a user submits the form  When the server returns a success  the user is taken to the Cart page      actions index js export function addProduct props      return dispatch   gt      axios post    ROOT URL  cart   props  config         then response   gt            dispatch   type  types AUTH USER             localStorage setItem  token   response data token           browserHistory push   cart       no longer in React Router V4               How can I make a redirect to the Cart page from function for React Router v4

User · Answer

If you want to use history while passing a function as a value to a Component's prop, with react-router 4 you can simply destructure the history prop in the render attribute of the <Route/> Component and then use history.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

Note: For this to work you should wrap React Router's BrowserRouter Component around your root component (eg. which might be in index.js)

User · Answer

If you are using Redux  then I would recommend using npm package react-router-redux  It allows you to dispatch Redux store navigation actions   You have to create store as described in their Readme file   The easiest use case   import   push   from  react-router-redux   this props dispatch push   second page       Second use case with Container Component   Container   import   connect   from  react-redux   import   push   from  react-router-redux    import Form from     components Form    const mapDispatchToProps   dispatch   gt       changeUrl  url   gt  dispatch push url         export default connect null  mapDispatchToProps  Form     Component   import React    Component   from  react   import PropTypes from  prop-types    export default class Form extends Component     handleClick        gt        this props changeUrl   secondPage            render         return          lt div gt           lt button onClick  this handleClick   gt         lt  div gt Readme file

User · Answer

you can use it like this as i do it for login and manny different things   class Login extends Component     constructor props       super props       this login this login bind this          login    this props history push   dashboard          render          return        lt div gt       lt button onClick  this login  gt login lt  login gt       lt  div gt

User · Answer

React router V4 now allows the history prop to be used as below   this props history push   dummy  value    The value then can be accessed wherever the location prop is available as  state  value  not component state

User · Answer

Step 1   myFunction     this props history push   home             lt button onClick      gt this myFunction    className   btn btn-primary   gt Go   Home lt  button gt

User · Answer

According to React Router v4 documentation - Redux Deep Integration session   Deep integration is needed to        be able to navigate by dispatching actions    However  they recommend this approach as an alternative to the  deep integration        Rather than dispatching actions to navigate you can pass the history object provided to route components to your actions and navigate with it there     So you can wrap your component with the withRouter high order component   export default withRouter connect null    actionCreatorName    ReactComponent     which will pass the history API to props  So you can call the action creator passing the history as a param  For example  inside your ReactComponent   onClick       gt      this props actionCreatorName      this props history      otherParams           Then  inside your actions index js   export function actionCreatorName history  param      return dispatch   gt        dispatch         type  SOME ACTION        payload  param data             history push   path

User · Answer

step one wrap your app in Router  import   BrowserRouter as Router   from  react-router-dom   ReactDOM render  lt Router gt  lt App   gt  lt  Router gt   document getElementById  root       Now my entire App will have access to BrowserRouter  Step two I import Route and then pass down those props  Probably in one of your main files    import   Route   from  react-router-dom      lots of code here    somewhere in my render function       lt Route       exact       path       put what your file path is here       render  props   gt           lt div gt           lt NameOfComponent               props    this will pass down your match  history  location objects           gt         lt  div gt                 gt    Now if I run console log this props  in my component js file that I should get something that looks like this   match         location         history           other stuff     Step 2 I can access the history object to change my location    lots of code here relating to my whatever request I just ran delete  put so on  this props history push         then put in whatever url you want to go to   Also I m just a coding bootcamp student  so I m no expert  but I know you can also you use   window location         wherever you want to go   Correct me if I m wrong  but when I tested that out it reloaded the entire page which I thought defeated the entire point of using React

User · Answer

I struggled with the same topic  I m using react-router-dom 5  Redux 4 and BrowserRouter  I prefer function based components and hooks  You define your component like this import   useHistory   from  quot react-router-dom quot   import   useDispatch   from  quot react-redux quot    const Component        gt            const history   useHistory      dispatch myActionCreator otherValues  history         And your action creator is following const myActionCreator    otherValues  history    gt  async  dispatch    gt            history push  quot  path quot       You can of course have simpler action creator if async is not needed

User · Answer

Simplest way in React Router 4 is to use   this props history push   new url      But to use this method  your existing component should have access to history object  We can get access by   If your component is linked to Route directly  then your component already has access to history object    eg    lt Route path   profile  component  ViewProfile   gt    Here ViewProfile has access to history  If not connected to Route directly   eg    lt Route path   users  render       gt   lt ViewUsers  gt     Then we have to use withRouter  a heigher order fuction to warp the existing component   Inside ViewUsers component    import   withRouter   from  react-router-dom   export default withRouter ViewUsers     That s it now  your ViewUsers component has access to history object    UPDATE  2- in this scenario  pass all route props to your component  and then we can access this props history from the component even without a HOC  eg    lt Route path   users  render  props   gt   lt ViewUsers     props    gt

User · Answer

so the way I do it is  - instead of redirecting using history push  I just use Redirect component from react-router-dom When using this component you can just pass push true  and it will take care of the rest  import   as React from  react   import   Redirect   from  react-router-dom   class Example extends React Component     componentDidMount         this setState         redirectTo    test path                 render         const   redirectTo     this state       return  lt Redirect to   pathname  redirectTo   push  true   gt

User · Answer

Be careful that don t use react-router 5 2 0 or react-router-dom 5 2 0 with history 5 0 0  URL will update after history push or any other push to history instructions but navigation is not working with react-router  use npm install history 4 10 1 to change the history version  see React router not working after upgrading to v 5  I think this problem is happening when push to history happened  for example using  lt NavLink to  quot  apps quot  gt  facing a problem in NavLink js that consume  lt RouterContext Consumer gt   context location is changing to an object with action and location properties when the push to history occurs  So currentLocation pathname is null to match the path

User · Answer

This is how I did it   import React   Component  from  react    export default class Link extends Component       constructor props            super props           this onLogout   this onLogout bind this             onLogout             this props history push                 render             return                lt div gt                   lt h1 gt Your Links lt  h1 gt                   lt button onClick  this onLogout  gt Logout lt  button gt               lt  div gt                       Use this props history push   cart    to redirect to cart page it will be saved in history object   Enjoy  Michael

User · Answer

You can use the history methods outside of your components  Try by the following way   First  create a history object used the history package      src history js  import   createBrowserHistory   from  history    export default createBrowserHistory      Then wrap it in  lt Router gt   please note  you should use import   Router   instead of import   BrowserRouter as Router         src index jsx         import   Router  Route  Link   from  react-router-dom   import history from    history    ReactDOM render     lt Provider store  store  gt       lt Router history  history  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   login  gt Login lt  Link gt  lt  li gt           lt  ul gt           lt Route exact path     component  HomePage    gt           lt Route path   login  component  LoginPage    gt         lt  div gt       lt  Router gt     lt  Provider gt     document getElementById  root         Change your current location from any place  for example      src actions userActionCreators js         import history from     history    export function login credentials      return function  dispatch        return loginRemotely credentials         then  response    gt                           history push                            UPD  You can also see a slightly different example in React Router FAQ

User · Answer

I was able to accomplish this by using bind     I wanted to click a button in index jsx  post some data to the server  evaluate the response  and redirect to success jsx   Here s how I worked that out     index jsx   import React    Component   from  react  import   postData   from        scripts request   class Main extends Component       constructor props            super props          this handleClick   this handleClick bind this          this postData   postData bind this             handleClick             const data                  first name    Test                last name    Guy                email    test test com                     this postData  person   data             render             return                lt div className  Main  gt                   lt button onClick  this handleClick  gt Test Post lt  button gt               lt  div gt                     export default Main   request js   import   post   from    fetch   export const postData   function url  data           post is a fetch   in another script        post url  data           then  result    gt                if  result status      ok                     this props history push   success                                success jsx   import React from  react   const Success        gt        return            lt div className  Success  gt              Hey cool  got it           lt  div gt           export default Success   So by binding this to postData in index jsx  I was able to access this props history in request js    then I can reuse this function in different components  just have to make sure I remember to include this postData   postData bind this  in the constructor

User · Answer

React Router v4 is fundamentally different from v3  and earlier  and you cannot do browserHistory push   like you used to   This discussion seems related if you want more info         Creating a new browserHistory won t work because  lt BrowserRouter gt  creates its own history instance  and listens for changes on that  So a different instance will change the url but not update the  lt BrowserRouter gt     browserHistory is not exposed by react-router in v4  only in v2         Instead you have a few options to do this    Use the withRouter high-order component  Instead you should use the withRouter high order component  and wrap that to the component that will push to history  For example   import React from  react   import   withRouter   from  react-router-dom    class MyComponent extends React Component           myFunction         this props history push   some Path                export default withRouter MyComponent     Check out the official documentation for more info      You can get access to the history object   s properties and the closest  lt Route gt  s match via the withRouter higher-order component  withRouter will re-render its component every time the route changes with the same props as  lt Route gt  render props    match  location  history          Use the context API  Using the context might be one of the easiest solutions  but being an experimental API it is unstable and unsupported  Use it only when everything else fails  Here s an example           import React from  react   import PropTypes from  prop-types    class MyComponent extends React Component     static contextTypes         router  PropTypes object       constructor props  context         super props  context               myFunction         this context router history push   some Path                  Have a look at the official documentation on context      If you want your application to be stable  don t use context  It is an experimental API and it is likely to break in future releases of React       If you insist on using context despite these warnings  try to isolate your use of context to a small area and avoid using the context API directly when possible so that it s easier to upgrade when the API changes

User · Answer

Here s my hack  this is my root-level file  with a little redux mixed in there - though I m not using react-router-redux    const store   configureStore   const customHistory   createBrowserHistory     basename  config urlBasename           ReactDOM render     lt Provider store  store  gt       lt Router history  customHistory  gt         lt Route component    history     gt            window appHistory   history         return              lt App   gt                      gt       lt  Router gt     lt  Provider gt     document getElementById  root       I can then use window appHistory push   anywhere I want  for example  in my redux store functions thunks sagas  etc  I had hoped I could just use window customHistory push   but for some reason react-router never seemed to update even though the url changed  But this way I have the EXACT instance react-router uses  I don t love putting stuff in the global scope  and this is one of the few things I d do that with  But it s better than any other alternative I ve seen IMO

User · Answer

Nasty question  took me quite a lot of time  but eventually  I solved it this way   Wrap your container with withRouter and pass history to your action in  mapDispatchToProps function  In action use history push   url   to navigate      Action   export function saveData history  data      fetch post   save   data        then  response    gt                      history push   url                 Container     import   withRouter   from  react-router-dom       const mapDispatchToProps    dispatch  ownProps    gt      return       save   data    gt  dispatch saveData ownProps history  data       export default withRouter connect mapStateToProps  mapDispatchToProps  Container      This is valid for React Router v4 x

User · Answer

In this case you re passing props to your thunk  So you can simply call  props history push   cart     If this isn t the case you can still pass history from your component   export function addProduct data  history      return dispatch   gt        axios post   url   data  then  response    gt          dispatch   type  types AUTH USER          history push   cart

User · Answer

Use Callback  It worked for me   export function addProduct props  callback      return dispatch   gt      axios post    ROOT URL  cart   props  config       then response   gt        dispatch   type  types AUTH USER         localStorage setItem  token   response data token       callback              In component  you just have to add the callback  this props addProduct props       gt  this props history push   cart

User · Answer

this context history push will not work   I managed to get push working like this   static contextTypes         router  PropTypes object    handleSubmit e        e preventDefault         if  this props auth success            this context router history push   some Path

User · Answer

I offer one more solution in case it is worthful for someone else   I have a history js file where I have the following   import createHistory from  history createBrowserHistory  const history   createHistory   history pushLater       args    gt  setImmediate      gt  history push    args   export default history   Next  on my Root where I define my router I use the following   import history from     history  import   Provider   from  react-redux  import   Router  Route  Switch   from  react-router-dom   export default class Root extends React Component     render         return         lt Provider store  store  gt         lt Router history  history  gt          lt Switch gt                      lt  Switch gt         lt  Router gt        lt  Provider gt                   Finally  on my actions js I import History and make use of pushLater  import history from    history  export const login   createAction      history pushLater   pathname  PATH REDIRECT LOGIN           This way  I can push to new actions after API calls   Hope it helps

User · Answer

Now with react-router v5 you can use the useHistory hook like this  import   useHistory   from  quot react-router-dom quot    function HomeButton       let history   useHistory       function handleClick         history push  quot  home quot           return        lt button type  quot button quot  onClick  handleClick  gt        Go home      lt  button gt          read more at  https   reacttraining com react-router web api Hooks usehistory

User · Answer

Create a custom Router with its own browserHistory   import React from  react   import   Router   from  react-router-dom   import   createBrowserHistory   from  history    export const history   createBrowserHistory     const ExtBrowserRouter     children     gt       lt Router history  history   gt      children      lt  Router gt      export default ExtBrowserRouter   Next  on your Root where you define your Router  use the following   import React from  react          import     BrowserRouter    Route  Switch  Redirect   from  react-router-dom      Use  ExtBrowserRouter  instead of  BrowserRouter  import ExtBrowserRouter from    ExtBrowserRouter         export default class Root extends React Component     render         return          lt Provider store  store  gt           lt ExtBrowserRouter gt             lt Switch gt                               lt Route path   login  component  Login     gt                             lt  Switch gt           lt  ExtBrowserRouter gt         lt  Provider gt                Finally  import history where you need it and use it   import   history   from     routers ExtBrowserRouter        export function logout      clearTokens            history push   login      WORKS AS EXPECTED    return Promise reject  Refresh token has expired

[reactjs] How to push to History in React Router v4?

Examples related to reactjs

Examples related to react-router

Examples related to react-router-v4