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

Question

I have reactjs page called Addmember.js,where I can add people. And I have a next button which will take me to dashboard via the following code

 this.props.history.push('/dashboard')

But the real problem arises, when I use the Add member component inside a new page, when i click next its showing the below error

Cannot read property 'push' of undefined

Help will be Appreciated!

Answer 1

Try importing withRouter from 'react-router-dom'

Then pass the component within withRouter

For eg.

export default withRouter(Addmember);

Answer 2

The problem is because your component can not find history props when you nest it. Currently react-router-dom updated to the version 5, so you can use their hooks.

To solve given problem you should import useHistory hook like so import {useHistory} from 'react-router-dom'

Then use it in AddMember like const history = useHistory() . Then you can use all methods from history where you need it. I think it will help for you