现在在react-router v5中，你可以像这样使用useHistory钩子:

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

详情请访问:https://reacttraining.com/react-router/web/api/Hooks/usehistory

根据React Router v4文档- Redux深度集成会话

深度整合需要:

“能够通过调度操作进行导航”

然而，他们推荐这种方法作为“深度集成”的替代方案:

“你可以将提供给路由组件的历史对象传递给你的操作，而不是分派操作来导航。”

所以你可以用withRouter高阶组件来包装你的组件:

export default withthrouter (connect(null， {actionCreatorName})(ReactComponent));

它将历史API传递给道具。你可以调用动作创建者传递历史作为参数。例如，在你的ReactComponent中:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

然后，在actions/index.js中:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}

注意不要将react-router@5.2.0或react-router-dom@5.2.0与history@5.0.0连用。URL将在历史记录之后更新。推送或任何其他推送到历史指令，但导航不适用于react-router。使用NPM install history@4.10.1更改历史版本。参见升级到v5后，React路由器无法工作。

我认为这个问题发生在推动历史发生的时候。例如，使用<NavLink to="/apps">时，NavLink.js会消耗<RouterContext.Consumer>. js。上下文。当推送到历史记录时，位置将更改为具有动作和位置属性的对象。所以currentLocation。Pathname为空以匹配路径。

第一步在路由器中包装你的应用程序

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

现在我的整个应用程序都可以访问BrowserRouter。第二步，我导入Route，然后传递这些道具。可能在你的一个主文件里。

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

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

现在如果我在我的组件js文件中运行console.log(this.props)，我应该得到类似这样的东西

{match: {…}, location: {…}, history: {…}, //other stuff }

步骤2访问历史记录对象，修改位置

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

另外，我只是一个编程训练营的学生，所以我不是专家，但我知道你也可以使用

window.location = "/" //wherever you want to go

如果我错了，请纠正我，但当我测试出来的时候，它重新加载了整个页面，我认为这击败了使用React的整个意义。

/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>

React Router 4中最简单的方法是使用

this.props.history.push('/new/url');

但是要使用此方法，您现有的组件应该能够访问历史对象。我们可以通过

If your component is linked to Route directly, then your component already has access to history object. eg: <Route path="/profile" component={ViewProfile}/> Here ViewProfile has access to history. If not connected to Route directly. eg: <Route path="/users" render={() => <ViewUsers/>} Then we have to use withRouter, a heigher order fuction to warp the existing component. Inside ViewUsers component import { withRouter } from 'react-router-dom'; export default withRouter(ViewUsers); That's it now, your ViewUsers component has access to history object.

更新

2-在这个场景中，将所有的路由道具传递给你的组件，然后我们可以从组件中访问this.props.history，即使没有一个HOC

eg:

<Route path="/users" render={props => <ViewUsers {...props} />}