59

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

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

我相信我将正确的索引值从Dashboardup 到Appdown 传递到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;
4

7 回答 7

108

为了history在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);

关于 withRouter 的文档

于 2017-05-16T19:15:30.690 回答
26

对于 React-router V4 将函数更改为

onClick={this.fun.bind(this)}

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

和

import { withRouter } from 'react-router-dom';

稍后将其导出为：

export default withRouter (comp_name);
于 2017-09-07T13:39:13.673 回答
22

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

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

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

  let history = useHistory();

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

history.push('/asdfg')
于 2020-10-30T10:52:53.630 回答
1

您试图在不将任务交给有效库的情况下进行推送。在 App.js 上

所以：在 App.js 上

您正在使用默认情况下处理页面历史记录的 BrowserRouter，使用这个 react-router-dom 函数，您依赖 BrowserRouter 为您执行此操作。

使用 Router 而不是 BrowserRouter 来控制你的历史，使用历史来控制行为。

  1. 使用 npm history "yarn add history@4.xx" / "npm i history@4.xx"
  2. 从'react-router-dom'导入路由；//不要使用浏览器路由器
  3. 从“createBrowserHistory”导入 createBrowserHistory；

记得导出！！导出常量历史 = createBrowserHistory();

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

希望这可以帮助 ！！！@brunomiyamotto

于 2018-06-30T16:26:02.640 回答
0

请参阅下面的 App.js 文件。我最终传递{...this.props}给了我创建的 NavBar 组件。NavBar 组件不是我的 Switch 路由的一部分。

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

在我的导航栏中。我使用的按钮有以下代码。我必须 .bind(this) 才能查看历史记录并能够使用this.props.history.push("/")

<Button
   color="inherit"
   onClick={this.handleLogout.bind(this)}>Logout</Button>
于 2018-12-27T22:39:29.230 回答
0

我的错误是与 结合的错误导入BrowserRouter，即：

不正确：

import { useHistory } from 'react-router'

正确的：

import { useHistory } from 'react-router-dom'

于 2021-07-20T09:32:18.480 回答
0

我通过将组件包装在BrowserRouter 中解决了这个错误。
不要忘记这一点，这是一个非常常见的错误。

import { BrowserRouter} from 'react-router-dom';

<BrowserRouter>
    <Menu/>
<BrowserRouter>

只有路由器子节点接收历史钩子。

于 2021-12-28T23:50:19.067 回答