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} />}

注意不要将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为空以匹配路径。

React路由器V4现在允许历史道具如下所示:

this.props.history.push("/dummy",value)

然后，只要位置道具可用，就可以访问该值 State:{value}不是组件状态。

我再提供一个解决方案，以防它对其他人有用。

我有一个history.js文件，其中我有以下内容:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

接下来，在我定义路由器的根目录上，我使用以下命令:

import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

最后，在我的actions.js中，我导入历史并使用pushLater

import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

这样，我可以在API调用之后推送到新的操作。

希望能有所帮助!

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

创建一个带有自己的browserHistory的自定义路由器:

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

接下来，在你定义路由器的根目录上，使用以下命令:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

最后，在需要的地方导入历史记录并使用它:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}