Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

reactjs - can not read property push of undefined

I have this code. What I want to do is when I click a button 'feature' it will take me to index route. However, React keeps saying 'can not read property push of undefined' What I've done wrong?

route.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute } from "react-router";

import Layout from "./page/Layout";
import Features from "./page/Features";
import Features from "./page/archive";

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

Layout component

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate(){
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}

package.json - partial

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
 "history": "^2.0.1",

-------------update to jordan's answer-------------

like image 458
angry kiwi Avatar asked Apr 07 '16 05:04

angry kiwi


People also ask

How do you solve Cannot read property of undefined react?

The "Cannot read property 'props' of undefined" error occurs when a class method is called without having the correct context bound to the this keyword. To solve the error, define the class method as an arrow function or use the bind method in the class's constructor method.

How do you deal with an undefined react?

To check for undefined in React, use a comparison to check if the value is equal or is not equal to undefined , e.g. if (myValue === undefined) {} or if (myValue !== undefined) {} . If the condition is met, the if block will run. Copied!

Can not read the property of null in react?

js # The "cannot read property 'map' of null" error occurs when we call the map() method on a null value, most often when initializing a state variable to null . To solve the error, initialize the value you're mapping over to an empty array.

How install NPM react router?

To install React Router, all you have to do is run npm install react-router-dom@6 in your project terminal and then wait for the installation to complete. If you are using yarn then use this command: yarn add react-router-dom@6 .


2 Answers

With React router v4, you need to wrap the components in withRouter. Then you can access history in your components. Do the following:

import { withRouter } from 'react-router-dom';
...
...
export default withRouter(MyComponent);
like image 138
Peter Avatar answered Nov 16 '22 01:11

Peter


usually, when you are trying to redirect from a nested component it will give this error.

there are a few ways to fix it

Using react-dom you can import the withRouter component from react-router-dom then use it as usual with this.props.history.push and instead of the usual export default 'class' we will use export default withRouter(class); and boom problem solve.

like image 24
jerryurenaa Avatar answered Nov 16 '22 00:11

jerryurenaa