为了history在App组件中使用，将它与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 的文档

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

使用函数式组件时，我们可以使用 useHistory() to history to push 方法

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

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

  let history = useHistory();

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

history.push('/asdfg')

您试图在不将任务交给有效库的情况下进行推送。在 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'导入路由；//不要使用BrowserRouter
3. 从“createBrowserHistory”导入 createBrowserHistory；

记得导出！！导出 const 历史记录 = createBrowserHistory();

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

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

请参阅下面的 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>