React-JS：未捕获的类型错误：无法读取未定义的属性'router'

Question

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;

我在浏览器控制台得到这个错误

Uncaught TypeError: Cannot read property 'router' of undefined

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

这是怎么回事?

Answer 1

要解决这个问题，你需要使用最新版本的react-router(不同的教程有不同版本的代码，我想)。

修改你的应用程序包。Json文件并运行'npm update':

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

那么ES2015中所有这些导入都应该可以工作了:

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

然后检查你所遵循的代码/教程是否匹配升级指南