React-JS:Uncaught TypeError:无法读取undefined的属性'router'

时间:2015-07-31 00:45:26

标签: javascript reactjs react-router

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;

我在浏览器控制台中收到此错误

  

未捕获的TypeError:无法读取未定义的属性“router”

我看到有些人把这个问题放在其他地方,但没有人得到明确的答复。

这里发生了什么?

1 个答案:

答案 0 :(得分:1)

要解决此问题,您需要使用最新版本的react-router(我认为各种教程都有不同版本的代码)。

更改您应用的package.json文件并运行'npm update':

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

然后,ES2015中的所有这些导入都应该有效:

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

然后检查您所关注的任何代码\教程是否与upgrade guide匹配。