Uncaught TypeError：无法读取未定义的属性“推”（React-Router-Dom）

我有一个带有旋转幻灯片的仪表板 ，每个都有一个相应的Bldgs选项卡。 Dashboard.js和Bldgs.js都是我的App.js孩子。

当用户点击Dashboard.js的特定幻灯片A时， Dashboard需要告知App.js以便App可以告诉Bldgs.js在路由到Bldgs时显示选项卡A

我相信我将正确的索引值从Dashboard传递给App ，然后传递给Bldgs 。 但是，我的App.js文件中正在抛出一个错误，指出：

Uncaught TypeError: Cannot read property 'push' of undefined

在开始将我的handleClick()函数传递给我的Dashboard组件之前，我的代码工作正常。

Index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import injectTapEventPlugin from 'react-tap-event-plugin'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import { BrowserRouter as Router } from 'react-router-dom'; import { hashHistory } from 'react-router'; // Needed for onTouchTap // http://stackoverflow.com/a/34015469/988941 injectTapEventPlugin(); ReactDOM.render( <MuiThemeProvider> <Router history={hashHistory}> <App /> </Router> </MuiThemeProvider>, document.getElementById('root') ); 

App.js

 import React from 'react'; import { Route } from 'react-router-dom'; import Dashboard from './Dashboard'; import Bldgs from './Bldgs'; var selectedTab; class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); selectedTab = 0; } handleClick(value) { selectedTab = value; // console.log(selectedTab); this.props.history.push('/Bldgs'); // console.log(this.props); } render() { var _this = this; return ( <div> <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} /> <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} /> </div> ); } } export default App; 

Dashboard.js

 import React, { Component } from 'react'; import './Dashboard.css'; import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel'; ... var curIndex; class Dashboard extends Component { constructor(props) { super(props); this.handleEnter = this.handleEnter.bind(this); this.handleChange = this.handleChange.bind(this); curIndex = 0; } handleEnter(e) { // console.log(curIndex); this.props.handleClick(curIndex); } handleChange(value) { // console.log(value); curIndex = value; } ... } export default Dashboard; 

Bldgs.js

 ... var curTab; class Bldgs extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.goHome = this.goHome.bind(this); curTab = 0; } handleChange(value) { this.setState({'selectedTab': value}); console.log(this.state); } goHome(e) { this.props.history.push('/'); } ... } export default Bldgs; 

Answer 1

为了利用App组件中的history ，使用它与withRouter

 import React from 'react'; import { Route , withRouter} from 'react-router-dom'; import Dashboard from './Dashboard'; import Bldgs from './Bldgs'; var selectedTab; class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); selectedTab = 0; } handleClick(value) { selectedTab = value; // console.log(selectedTab); this.props.history.push('/Bldgs'); // console.log(this.props); } render() { var _this = this; return ( <div> <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} /> <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} /> </div> ); } } export default withRouter(App); 

有关路由器的文档

Answer 2

对于React-router V4改变function

的onClick = {this.fun.bind（本）}

 fun(){ this.props.history.push("/Home"); } 

和

 import {browserHistory,withRouter} from "react-router-dom" export default withRouter (comp_name);