Hello I am learning React js and I have came across a problem. When I try to change back to the main page using react router i get the following error:
Uncaught TypeError: Cannot read property 'push' of undefined
Here is my code, as you can see I am calling the navigate function:
My client.js with router:
If I replace this.props.router.push('/');
with this.props.history.push('/');
it works fine.
What could be the problem?
You are missing a constructor method with a call to super()
. super()
calls the constructor of the parent class and is needed to properly pass the properties of the parents class to this component. You would need this to access any properties passed to the component, including router
.
The top of your layout class should look like this.
export default class Layout extends React.Component {
constructor(props) {
super(props)
}
navigate() {
...
}
render() {
...
}
}
Here are the docs on how classes work in ES6!
Edit 1: React Router
You also need to use the new withRouter
when doing navigation via this.props.router
. You do this by passing your component as an argument and exporting that. The withRouter
function just wraps your component in another component that passes the router prop down to your component. I should point out that there are other ways of doing programmatic routing (singletons, context, etc.), but when using this.props.router.push
you will need to use withRouter
.
import { withRouter } from 'react-router'
class Layout extends React.Component {
constructor(props) {
super(props)
}
navigate() {
...
}
render() {
...
}
}
export default withRouter(Layout)
Using withRouter
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With