未定义的TypeError:无法读取未定义的属性“push”(React read )
未定义的TypeError:无法读取未定义的属性“push”(React read )
提问于 2017-05-16 19:05:56
我有一个带有旋转幻灯片的仪表板，每个在Bldgs中都有一个相应的选项卡。Dashboard.js和Bldgs.js都是我App.js的孩子。
当用户单击Dashboard.js中的特定幻灯片Dashboard.js时，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;回答 6
Stack Overflow用户
回答已采纳
发布于 2017-05-16 19:15:30
为了在App组件中使用App，将其与withRouter一起使用。只有当组件没有接收到withRouter时，才需要使用Router props，
当您的组件是由路由器或呈现的组件的嵌套子组件时，您还没有将路由器道具传递给它--当组件根本没有链接到路由器，并且呈现为与路由独立的组件时，可能会发生这种情况。
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);文档 on withRouter
Stack Overflow用户
发布于 2017-09-07 13:39:13
for function路由器V4将该函数更改为
onClick={this.fun.bind(this)}
fun() {
this.props.history.push("/Home");
}和
import { withRouter } from 'react-router-dom';稍后以下列方式出口：
export default withRouter (comp_name);Stack Overflow用户
发布于 2020-10-30 10:52:53
在使用功能组件时，我们可以使用useHistory()对历史进行推送方法
import { useHistory } from "react-router-dom";然后，在函数中，我们必须分配useHistory()
let history = useHistory();现在我们可以使用history.push重新定位到所需的页面
history.push('/asdfg')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44009618
复制相关文章
相似问题
腾讯云开发者
