未捕获的类型错误：无法读取未定义的属性“推送”（React-Router-Dom）

Question

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

When a user clicks on a specific slide A in Dashboard.js , Dashboard needs to tell App.js so that App 可以告诉 Bldgs.js 在路由到 Bldgs 时显示选项卡 A 。

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

Uncaught TypeError: Cannot read property 'push' of undefined

在我开始将 handleClick() 函数传递给我的 Dashboard 组件之前，我的代码运行良好。

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

应用程序.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;

仪表板.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;

原文由 Mike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了在 App 组件中使用 history 将其与 withRouter 一起使用。您需要使用 withRouter 仅当您的组件未收到 Router props 时，

当您的组件是 Router 渲染的组件的嵌套子组件， 或者 您没有将 Router props 传递给它， 或者 组件根本没有链接到 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);

withRouter 文档

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用功能组件时，我们可以使用 useHistory() 将历史推送到方法

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

然后在函数中我们必须分配 useHistory()

   let history = useHistory();

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

history.push('/asdfg')

原文由 Aaquib 发布，翻译遵循 CC BY-SA 4.0 许可协议