Question

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

2015-07-31

3901

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;

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

Uncaught TypeError: Cannot read property 'router' of undefined

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

这是怎么回事？

Answer 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);

然后检查您正在关注的任何代码\教程是否与升级指南相匹配。