React-router v4 this props history push not working

Question

I m trying to route programatically using this props history push     but it doesn t seem to work   Here s the router    import    BrowserRouter as Router   Route   from  react-router-dom     lt Router gt    lt Route path   customers   exact component  CustomersList    gt    lt Route path   customers  id  exact component   Customer    gt   lt  Router gt    In CustomerList  a list of customers is rendered  Clicking on a customer  li  should make the application route to Customer   import   withRouter   from  react-router   class Customers extends Component     static propTypes         history  PropTypes object isRequired       handleCustomerClick customer       this props history push   customers   customer id          render        return       lt ul gt          this props customers map  c    gt           lt li onClick       gt  this handleCustomerClick c   key  c id  gt             c name           lt  li gt        lt  ul gt               connect to redux to get customers  CustomersList   withRouter CustomersList   export default CustomersList    The code is partial but illustrates perfectly the situation  What happens is that the browser s address bar changes accordingly to history push      but the view does not update  Customer component is not rendered and CustomersList is still there  Any ideas

User · Answer

I had similar symptoms  but my problem was that I was nesting BrowserRouter  Do not nest BrowserRouter  because the history object will refer to the nearest BrowserRouter parent  So when you do a history push targeturl  and that targeturl it s not in that particular BrowserRouter it won t match any of it s route  so it will not load any sub-component  Solution Nest the Switch without wrapping it with a BrowserRouter  Example Let s consider this App js file  lt BrowserRouter gt     lt Switch gt       lt Route exact path  quot  nestedrouter quot  component  NestedRouter     gt       lt Route exact path  quot  target quot  component  Target     gt     lt  Switch gt   lt  BrowserRouter gt   Instead of doing this in the NestedRouter js file  lt BrowserRouter gt     lt Switch gt       lt Route exact path  quot  nestedrouter  quot  component  NestedRouter     gt       lt Route exact path  quot  nestedrouter subroute quot  component  SubRoute     gt     lt  Switch gt   lt  BrowserRouter gt   Simply remove the BrowserRouter from NestedRouter js file    lt Switch gt       lt Route exact path  quot  nestedrouter  quot  component  NestedRouter     gt       lt Route exact path  quot  nestedrouter subroute quot  component  SubRoute     gt     lt  Switch gt

User · Answer

this props history push   customers   customer id    null

User · Answer

You can try to load the child component with history  to do so  pass  history  through props  Something like that     return      lt div gt       lt Login history  this props history    gt       lt br  gt       lt Register  gt     lt  div gt

User · Answer

So I came to this question hoping for an answer but to no avail  I have used  const   history     this props  history push   thePath     In the same project and it worked as expected  Upon further experimentation and some comparing and contrasting  I realized that this code will not run if it is called within the nested component  Therefore only the rendered page component can call this function for it to work properly   Find Working Sandbox here   history  v4 7 2  react  v16 0 0  react-dom  v16 0 0  react-router-dom  v4 2 2

User · Answer

You need to export the Customers Component not the CustomerList       CustomersList   withRouter Customers       export default CustomersList

User · Answer

It seems things have changed around a bit in the latest version of react router  You can now access history via the context  this context history push   path    Also see the replies to the this github issue  https   github com ReactTraining react-router issues 4059

User · Answer

Let s consider this scenario  You have App jsx as the root file for you ReactJS SPA  In it your render   looks similar to this    lt Switch gt       lt Route path   comp  component  MyComponent    gt   lt  Switch gt    then  you should be able to use this props history inside MyComponent without a problem  Let s say you are rendering MySecondComponent inside MyComponent  in that case you need to call it in such manner    lt MySecondComponent     props    gt    which will pass the props from MyComponent down to MySecondComponent  thus making this props history available in MySecondComponent

User · Answer

For me  react-router v4  react v16  the problem was that I had the navigation component all right   import   Link  withRouter   from  react-router-dom   class MainMenu extends Component      render         return                                lt NavLink to   contact  gt Contact lt  NavLink gt                                export default withRouter MainMenu     Both using either   to   contact     or   OnClick       gt  this props history push   contact        The behavior was still the same - the URL in browser changed but wrong components were rendered  the router was called with the same old URL   The culprit was in the router definition  I had to move the MainMenu component as a child of the Router component      wrong placement of the component that calls the router  lt MainMenu history  this props history    gt   lt Router gt      lt div gt          this is the right place for the component        lt MainMenu history  this props history    gt        lt Route path     exact component  MainPage    gt        lt Route path   contact   component  MainPage    gt      lt  div gt   lt  Router gt

User · Answer

Don t use with Router   handleSubmit e      e preventDefault       this props form validateFieldsAndScroll  err values   gt         if  err           this setState               visible false                     this props form resetFields            console log values username           const path     list            this props history push path                     It works well

User · Answer

You need to bind handleCustomerClick   class Customers extends Component     constructor         super        this handleCustomerClick   this handleCustomerClick this

User · Answer

Seems like an old question but still relevant   I think it is a blocked update issue   The main problem is the new URL  route  is supposed to be rendered by the same component Costumers  as you are currently in  current URL    So solution is rather simple  make the window url as a prop  so react has a chance to detect the prop change  therefore the url change   and act accordingly   A nice usecase described in the official react blog called Recommendation  Fully uncontrolled component with a key   So the solution is to change from  render        return       lt ul gt    to  render        return       lt ul key  this props location pathname  gt    So whenever the location changed by react-router  the component got scrapped  by react  and a new one gets initiated with the right values  by react    Oh  and pass the location as prop to the component Costumers  where the redirect will happen if it is not passed already   Hope it helps someone

User · Answer

You can get access to the history object s properties and the closest  s match via the withRouter higher-order component  withRouter will pass updated match  location  and history props to the wrapped component whenever it renders   import React    Component   from  react  import   withRouter   from  react-router       you can also import  withRouter  from  react-router-dom    class Example extends Component       render             const   match  location  history     this props         return                lt div gt                   lt div gt You are now at  location pathname  lt  div gt                   lt button onClick       gt  history push       gt   Home   lt  button gt               lt  div gt                      export default withRouter Example

[javascript] React-router v4 this.props.history.push(...) not working

Solution

Example

Let's consider this `App.js` file

Instead of doing this in the `NestedRouter.js` file

Simply remove the `BrowserRouter` from `NestedRouter.js` file

Examples related to javascript

Examples related to reactjs

Examples related to react-redux

Examples related to react-router