我有这个代码。我想要做的是,当我单击“功能”按钮时,它将带我索引路线。但是,React一直说“无法读取未定义的属性推送”我做错了什么?
route.js
import React from "react"; import ReactDOM from "react-dom"; import {Router, Route, hashHistory, IndexRoute } from "react-router"; import Layout from "./page/Layout"; import Features from "./page/Features"; import Features from "./page/archive"; const app = document.getElementById('app'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Layout}> <IndexRoute component={Features} /> <Route path="archive" component={Archive} /> </Route> </Router>, app);
布局组件
import React from "react"; import {Link, Router, Route, hashHistory} from "react-router"; export default class Layout extends React.Component{ navigate(){ this.context.router.push('/'); } render(){ return( <div> {this.props.children} <button onClick={this.navigate.bind(this)}>feature</button> </div> ) } }
package.json-部分
"react": "^0.14.7", "react-dom": "^0.14.7", "react-router": "^2.0.1" "history": "^2.0.1",
-------------更新到约旦的答案-----------------
export default class Layout extends React.Component{ navigate = () => { this.context.router.push('/'); } render(){ return( <div> {this.props.children} <button onClick={this.navigate.bind(this)}>feature</button> </div> ) } } Layout.contextTypes = { router: PropTypes.object.isRequired }