1）react-router> V5useHistory钩子：

如果您有React >= 16.8功能组件，您可以使用useHistory react-router 中的钩子。

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

const YourComponent = () => {
    const history = useHistory();

    const handleClick = () => {
        history.push("/path/to/push");
    }

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

export default YourComponent;

2）react-router> V4 withRouterHOC：

正如@ambar 在评论中提到的，React-router 自 V4 以来已经改变了他们的代码库。这是文档 -官方的，withRouter

import React, { Component } from 'react';
import { withRouter } from "react-router-dom";

class YourComponent extends Component {
    handleClick = () => {
        this.props.history.push("path/to/push");
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button">
            </div>
        );
    };
}

export default withRouter(YourComponent);

3) React-router < V4 with browserHistory

您可以使用 react-router 实现此功能BrowserHistory。代码如下：

import React, { Component } from 'react';
import { browserHistory } from 'react-router';

export default class YourComponent extends Component {
    handleClick = () => {
        browserHistory.push('/login');
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button">
            </div>
        );
    };
}

4) 还原 connected-react-router

如果你已经将你的组件与 redux 连接起来，并且已经配置了connected-react-router，那么你所要做的 this.props.history.push("/new/url");就是，你不需要withRouterHOC 来注入history组件 props。

// reducers.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

export default (history) => combineReducers({
    router: connectRouter(history),
    ... // rest of your reducers
});


// configureStore.js
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './reducers';
...
export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
    const store = createStore(
        createRootReducer(history), // root reducer with router state
        preloadedState,
        compose(
            applyMiddleware(
                routerMiddleware(history), // for dispatching history actions
                // ... other middlewares ...
            ),
        ),
    );

    return store;
}


// set up other redux requirements like for eg. in index.js
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter } from 'connected-react-router';
import configureStore, { history } from './configureStore';
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <> { /* your usual react-router v4/v5 routing */ }
                <Switch>
                    <Route exact path="/yourPath" component={YourComponent} />
                </Switch>
            </>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);


// YourComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
...

class YourComponent extends Component {
    handleClick = () => {
        this.props.history.push("path/to/push");
    }

    render() {
        return (
          <div>
            <button onClick={this.handleClick} type="button">
          </div>
        );
      }
    };

}

export default connect(mapStateToProps = {}, mapDispatchToProps = {})(YourComponent);

对于简单的答案，您可以使用Link组件 from react-router，而不是button。有多种方法可以更改 JS 中的路由，但在这里似乎不需要。

<span className="input-group-btn">
  <Link to="/login" />Click to login</Link>
</span>

要在 1.0.x 中以编程方式执行此操作，您可以在 clickHandler 函数中执行以下操作：

this.history.pushState(null, 'login');

取自此处的升级文档

你应该this.history放在你的路由处理组件react-router。如果它是routes定义中提到的子组件，您可能需要进一步传递它

如何使用 react-router 重定向到另一条路由？

例如，当用户单击链接时，<Link to="/" />Click to route</Link>react-router 将查找/，您可以使用Redirect to并将用户发送到其他地方，例如登录路由。

从文档的ReactRouterTraining：

渲染 a<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向 (HTTP 3xx) 那样。

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

to：字符串，要重定向到的 URL。

<Redirect to="/somewhere/else"/>

to：对象，要重定向到的位置。

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/>

最简单的网络解决方案！

截至 2020 年，
已确认与以下机构合作：

"react-router-dom": "^5.1.2"
"react": "^16.10.2"

使用useHistory()钩子！

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


export function HomeSection() {
  const history = useHistory();
  const goLogin = () => history.push('login');

  return (
    <Grid>
      <Row className="text-center">          
        <Col md={12} xs={12}>
          <div className="input-group">
            <span className="input-group-btn">
              <button onClick={goLogin} type="button" />
            </span>
          </div>
        </Col>
      </Row>
    </Grid>
  );
}

使用 react-router v2.8.1（也可能是其他 2.xx 版本，但我还没有测试过），您可以使用此实现来执行路由器重定向。

import { Router } from 'react-router';

export default class Foo extends Component {

  static get contextTypes() {
    return {
      router: React.PropTypes.object.isRequired,
    };
  }

  handleClick() {
    this.context.router.push('/some-path');
  }
}