React-JS：未捕获的类型错误：无法读取未定义的属性“路由器”答案

【问题标题】：React-JS: Uncaught TypeError: Cannot read property 'router' of undefinedReact-JS：未捕获的类型错误：无法读取未定义的属性“路由器”
【发布时间】：2015-10-22 13:20:22
【问题描述】：

index.js - 页面/主页

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;

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

未捕获的类型错误：无法读取未定义的属性“路由器”

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

这是怎么回事？

【问题讨论】：

你使用的是什么版本的 React？
什么版本的 react-router？你可以查看“升级指南”（github.com/rackt/react-router/blob/master/…），上面写着要继续使用React.createClass 和 mixins 而不是 ES6 类和上下文。
绑定onActive 函数，就像这样，_onActive = (tab) => {}，应该可以修复它。

标签： javascript reactjs react-router

【解决方案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 匹配。

【讨论】：