javascript – 未捕获的TypeError：无法读取未定义的属性’push'(React-Router-Dom)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 未捕获的TypeError：无法读取未定义的属性’push'(React-Router-Dom)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3498字，纯文字阅读大概需要5分钟。

内容图文

我有一个带旋转幻灯片的仪表板,每个幻灯片在Bldgs中都有一个相应的标签. Dashboard.js和Bldgs.js都是我的App.js的孩子.

当用户点击Dashboard.js中的特定幻灯片A时,Dashboard需要告诉App.js,以便App可以告诉Bldgs.js在路由到Bldgs时显示标签A.

我相信我将正确的索引值从Dashboard传递到App并向下传递给Bldgs.但是,我的App.js文件中引发了一个错误,指出：

未捕获的TypeError：无法读取未定义的属性’push’

在我开始将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
// https://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;

解决方法:

为了在App组件中使用历史记录,请将其与withRouter一起使用.只有当组件没有收到Router道具时,才需要使用withRouter,

如果您的组件是由路由器呈现的组件的嵌套子级,或者您没有将Router支持传递给它,或者组件根本没有链接到路由器并且从组件呈现为单独的组件,则可能会发生这种情况.路线.

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

Documentation on withRouter

内容总结

以上是互联网集市为您收集整理的javascript – 未捕获的TypeError：无法读取未定义的属性’push'(React-Router-Dom)全部内容，希望文章能够帮你解决javascript – 未捕获的TypeError：无法读取未定义的属性’push'(React-Router-Dom)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---