CODEWITHSUNDEEP
javascriptreactjsreact-router
Non
Non

Reputation: 8589

React-JS: Uncaught TypeError: Cannot read property 'router' of undefined

index.js - pages/home

import React, { Component } from 'react';
import ApogeeLogo from '../../components/ApogeeLogo';
import {Router, RouteHandler} from 'react-router';
import { Tabs, Tab, FlatButton } from 'material-ui';

export default class Home extends Component {

  static contextTypes = {
    router : React.PropTypes.func
  }  

  render () {
    return <div className="container">
      <Tabs> 
        <Tab label="Item One" > 
             ITEMS
        </Tab>                         
        <Tab label="Item Two" > 
             ITEMS
        </Tab> 
        <Tab 
          label="Item Three" 
          route="/home" 
          onActive={this._onActive} /> 
         //ISSUE HERE
      </Tabs> 
      <RouteHandler />
    </div>;
  };

  _onActive(tab){ 
    this.context.router.transitionTo(tab.props.route); 
  }  

}

routes.js

const Routes = (
  <Route name="root" path="/" handler={Root}>

    <Route name="app" handler={App}>
      <Route name="home" handler={Home} />
      <Route name="about" handler={About} />
      <DefaultRoute handler={Home} />
    </Route>

    <Route name="login" handler={Login} />
    <DefaultRoute handler={Login} />
  </Route>
);

export default Routes;

I am getting this error in the browser console

Uncaught TypeError: Cannot read property 'router' of undefined

I see some people placing this question in other places and non of them are getting a clear response.

what is going on here?

Upvotes: 1

Views: 3906

Answers (1)

Richard
Richard

Reputation: 16762

To fix this you need to use the latest version of react-router (various tutorials have different versions of code, I think).

Alter your app's package.json file and run 'npm update':

"dependencies":
{       
    "react": "*",
    "react-router": "^1.0.0-rc3"
}

Then all these imports in ES2015 should work:

import {RouteHandler, Link, Route, Router} from 'react-router';
window.alert(Router);

Then check whatever code\tutorial you are following matches the upgrade guide.

Upvotes: 1

Related Questions