CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-component
user6730596
user6730596

Reputation:

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 application react-router is working and some giving error like this: "Cannot read property 'push' of undefined".

i am using react 0.14.1

My routing code looks like this:

render(
<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}/>


</Router>,
document.getElementById('js-main'));

My component is like this now:

class  App extends React.Component {

  constructor(props) {
    super(props);
    this.state= {      
      comments: AppStore.getAll();
    };
  }

  componentWillMount() {  
    var length = this.state.comments.length;
    var firstnumber = length - 4;

    if(length == 0){
      console.log("here comes");
      this.props.router.push('/');
    }
    else{
      console.log('work normally');
    }
  }

}

Can anyone help me with this? Thanks.

Upvotes: 12

Views: 57421

Answers (7)

Prince verma
Prince verma

Reputation: 21

You can get access to the history prop from witRouter higher order component, and use the push method on the history object to push the route you want to.

import { withRouter } from "react-router";

class App extends React.Component {

    componentWillMount() {
        ...
        this.props.history.push('/');
        ...
    }

}

export default withRouter(App);

Upvotes: 0

vkstream
vkstream

Reputation: 907

Add two lines.

import { withRouter } from "react-router-dom";
this.props.history.push("/welcomePage");

Upvotes: -3

Jitendra Kumar
Jitendra Kumar

Reputation: 2221

If you are use Partial Component and calling it like <Header /> then you should replace it by <Header {...this.props} />

Upvotes: 10

ivarni
ivarni

Reputation: 17878

Using hashHistory directly from react-router is certainly an option, but it makes unit-testing a bit more painful. Browser history will generally not be available in the context tests run in and it's easier to mock out a prop than to mock out a global API.

Consider using the withRouter higher-order-component that react-router provide (since v2.4.0).

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

Your App class will receiver router via props and you can safely do this.props.router.push('/');.

Upvotes: 15

Patrick Pei
Patrick Pei

Reputation: 447

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!

Upvotes: 4

Md.Estiak Ahmmed
Md.Estiak Ahmmed

Reputation: 1593

you can try the below code see if your router props is working or not

componentWillMount() {

var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
    console.log("here comes");
  if(this.props.router !== undefined) {
    this.props.router.push('/');
  } else {
    console.log(this.props.router);
  }
}
else{
    console.log('work normally');
}
}

also you can visit their documentation to get more information from below url https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

Upvotes: 1

vijayst
vijayst

Reputation: 21914

You are using hashHistory. The following code should work.

import { hashHistory } from 'react-router';
hashHistory.push('/');

The root route should also be defined.

<Route path="/" component={App}>

Upvotes: 1

Related Questions