Friday, May 10, 2024
 Popular · Latest · Hot · Upcoming
6
rated 0 times [  8] [ 2]  / answers: 1 / hits: 16490  / 8 Years ago, fri, may 6, 2016, 12:00:00

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:


enter


My client.js with router:


enter


If I replace this.props.router.push('/'); with this.props.history.push('/'); it works fine.
What could be the problem?


More From » reactjs

 Answers
9

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


[#62278] Wednesday, May 4, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kaitlynnb

Total Points: 402
Total Questions: 96
Total Answers: 109

Location: Trinidad and Tobago
Member since Fri, May 8, 2020
4 Years ago
kaitlynnb questions
;