m03a3a17 m03a3a17 -4 years ago 332
Javascript Question

react-router " Cannot read property 'push' of undefined"

i am quite new to react and react-router.

Problem with react is here that, on some pages of my applicaction react-router is working and some giving error like this " Cannot read property 'push' of undefined"

i am using react 0.14.1

my code looks like this

<Router history={hashHistory}>
<Route path="/" component={Loginpanel}/>
<Route path="Index" component={Index}/>
<Route path="Form" component={Form} />
<Route path="Checkindex" component={Index}/>

<Route path="Signup" component={Signup}/>
<Route path="Admin" component={Admin}/>
<Route path="AdminEditDetails" component={AdminEditDetails}/>
<Route path="AdminDetails" component={AdminDetails}/>


my component is like this now-

import React, { Component } from 'react';
import Detail from 'components/Detail/Detail';
import Filter from 'components/Filter/Filter';
import Form from 'components/Form/Form';
import Loginpanel from 'components/login_panel/Loginpanel'
import Signup from 'components/login_panel/signUp'
var AppActions = require('../../Action/AppActions');
var AppStore = require('../../Stores/AppStore');
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
import {Link} from "react-router";

import {withRouter} from 'react-router';

var CryptoJS = require("crypto-js");
import Formheader from '../Detail/formheader';
import PageContainer from './../login_panel/Pagecontainer';

class App extends React.Component{

constructor(props) {
this.state= {

comments: AppStore.getAll(),



componentWillMount() {

var length = this.state.comments.length;
var firstnumber = length - 4;

if(length == 0){
console.log("here comes");
console.log('work normally');

my code is bit like this.

can anyone help me with this

Answer Source

Your app does not have an instance of Router in its props which is giving you Cannot read property 'push' of undefined.

I'm assuming you're importing withRouter to get the instance of the Router so you'd need to wrap the component in that if you still want to use that... (example here but not suggested)

Instead, a better approach to programmatically navigating is to use

import { hashHistory } from 'react-router;' ... hashHistory.push('/'); in your componentWillMount lifecycle event.

The docs are here

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download