Javascript 未捕获类型错误：无法读取属性'；推动'；未定义的类型（反应路由器Dom）

我有一个带有旋转幻灯片的仪表板，每个仪表板在Bldgs中都有相应的选项卡。

Dashboard.js

和

Bldgs.js

都是我的

App.js

的孩子

当用户单击

Dashboard.js

中的特定幻灯片

a

时，

Dashboard

需要告诉

App.js

，以便

App

可以告诉

Bldgs.js

在路由到

Bldgs

时显示选项卡

a

我相信我正在将正确的索引值从

仪表板

传递到

App

，再传递到

Bldgs

。但是，我的

App.js

文件中抛出了一个错误，说明：

未捕获类型错误：无法读取未定义的属性“push”

在我开始将我的

handleClick（）

函数传递给我的

仪表板

组件之前，我的代码工作正常

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

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;

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;

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

Bldgs.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')
);

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;

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;

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

---

要使用

应用程序

组件中的

历史

，请将其与

路由器

一起使用。只有当您的组件未接收到

路由器道具时，才需要使用
with 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);

从“React”导入React；
从“react router dom”导入{Route，withRouter}；
从“/Dashboard”导入仪表板；
从“./Bldgs”导入Bldgs；
var选择抗体；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
selectedTab=0；
}
handleClick（值）{
selectedTab=值；
//console.log（已选择选项卡）；
this.props.history.push（'/Bldgs'）；
//console.log（this.props）；
}
render（）{
var_this=这个；
返回(
} />
);
}
}
使用路由器（App）导出默认值；

对React路由器V4启用withRouter

将函数更改为

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

及

稍后将其导出为：

export default withRouter (comp_name);

您正在尝试将任务交给有效的库而不执行。在App.js上

因此：
在App.js上

您使用的是默认情况下处理页面历史记录的BrowserRouter，通过此react router dom函数，您可以依靠BrowserRouter来完成此操作

使用路由器而不是BrowserRouter来控制您的历史记录，使用历史记录来控制行为

使用npm历史记录“纱线添加”history@4.x.x“/”npm ihistory@4.x.x"
从“react router dom”导入路由//不要使用浏览器路由器
从“createBrowserHistory”导入createBrowserHistory
记得把它搬走！！
export const history=createBrowserHistory（）

4.将历史导入Dashboard.js
5.将历史导入Bldgs.js

希望这有帮助！！！
@brunomiyamotto
请参见下面的my App.js文件。我最终将
{…this.props}
传递给我创建的NavBar组件。
导航栏组件不是我的交换机路由的一部分

import React, { Component } from 'react';
import { Route, Link, Redirect, Switch, withRouter } from 'react-router-dom'

import Navbar from './Navbar.js';
import Home from './Home/HomeCont';
import Login from './Register/Login';
import Dashboard from './Dashboard/DashboardCont';


import './App.css';

class App extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <div className="App">
        <header className="App-header">

//SOLUTION!!!
          <Navbar {...this.props}/>


        </header>
        <Switch>
          <React.Fragment>
            <Route exact path="/" render={(props) => <Home {...props}/>}/>

            <Route exact path="/login" render={(props) => <Login {...props}/>}/>


          </React.Fragment>


        </Switch>
      </div>
    );
  }
}

export default withRouter(App);

当使用功能组件时，我们可以使用useHistory（）到history-to-push方法

import { useHistory } from "react-router-dom";

然后在函数中，我们必须分配useHistory（）

现在我们可以使用history.push重新定位到所需页面

history.push('/asdfg')

这就是你需要的答案。这个小小的改变让一切都正常，但你能解释一下它在做什么吗？非常感谢。添加了withRouter文档，其中描述了这一点。为什么导入
browserHistory
？不需要使用bind（this）您可以只使用onClick={this.fun}OP正在使用类组件，所以不可能在它内部使用钩子+当有人提出问题时，不可能使用钩子，因为它们不存在。我知道，但我也想为现在也使用钩子的人提供解决方案，这个答案是3年前提出的，现在人们更多地转向功能组件，而问题并不仅仅是关于类组件，所以如果现在人们发现这个问题，希望他们能找到我的解决方案，我很抱歉这样做，这就是我来这里的原因。。。