This.Props.History.Push Works in Some Components and Not Others

this.props.history.push works in some components and not others

You answered your question in your question.

As you can see, the components are virtually exactly the same except
that the child one is inside the parent one.

The very fact that the component is nested one further is your issue. React router only injects the routing props to the component it routed to, but not to the components nested with in.

See the accepted answer to this question. The basic idea is that you now need to find a way to inject the routing props to the child component.
You can do that by wrapping the child in a HOC withRouter.

export default withRouter(connect(mapStateToProps, matchDispatchToProps)(ChildView));

I hope this helps.

The 'this.props.history.push()' is working for normal page but not working for nested components?

Try importing withRouter from 'react-router-dom'

Then pass the component within withRouter

For eg.

export default withRouter(Addmember);

this.props.history.push has undefined state

    this.props.history.push({pathname: "adminPage", state : { user : my_user}});

change into

 this.props.history.push("/adminPage", { state: user}); 

Refrence 1
Refrence 2

---

Related Topics