如果使用函数组件，请使用useHistory钩子

你可以使用useHistory钩子获取历史实例。

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

const MyComponent = () => {
  const history = useHistory();
  
  return (
    <button onClick={() => history.push("/about")}>
      Click me
    </button>
  );
}

useHistory钩子使您可以访问用于导航的历史实例。

在页面组件中使用history属性

React Router向页面组件注入一些属性，包括历史记录。

class HomePage extends React.Component {
  render() {
    const { history } = this.props;

    return (
      <div>
        <button onClick={() => history.push("/projects")}>
          Projects
        </button>
      </div>
    );
  }
}

用throuter包装子组件以注入路由器属性

withRouter包装器将路由器属性注入组件。例如，您可以使用此包装器注入路由器注销按钮组件放置在用户菜单。

import { withRouter } from "react-router";

const LogoutButton = withRouter(({ history }) => {
  return (
    <button onClick={() => history.push("/login")}>
      Logout
    </button>
  );
});

export default LogoutButton;

对于那些在使用React router或React router Dom完全初始化路由器之前需要重定向的人，你可以通过简单地访问历史对象并在app.js的结构中将一个新状态推到它上来提供重定向。考虑以下几点:

function getSubdomain(hostname) {
    let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
    let urlParts = regexParse.exec(hostname);
    return hostname.replace(urlParts[0], '').slice(0, -1);
}

class App extends Component {

    constructor(props) {
        super(props);


        this.state = {
            hostState: true
        };

        if (getSubdomain(window.location.hostname).length > 0) {
            this.state.hostState = false;
            window.history.pushState('', '', './login');
        } else {
            console.log(getSubdomain(window.location.hostname));
        }

    }


    render() {
        return (

            <BrowserRouter>
                {this.state.hostState ? (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                        <Route path="/" component={PublicContainer}/>
                    </div>
                ) : (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                    </div>
                )

                }
            </BrowserRouter>)
    }


}

在这里，我们想要改变依赖于子域的输出路由，通过在组件呈现之前与历史对象交互，我们可以有效地重定向，同时仍然保留我们的路由。

window.history.pushState('', '', './login');

如此:

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

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;

我已经测试v4好几天了。到目前为止，我很喜欢它!过一段时间就明白了。

我也有同样的问题，我发现用下面的方法处理它是最好的(甚至可能是它的目的)。它使用state、三元操作符和<Redirect>。

在构造函数()中

this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);

在render()中

render(){
    return (
        <div>
        { this.state.redirectTo ?
            <Redirect to={{ pathname: this.state.redirectTo }} /> : 
            (
             <div>
               ..
             <button onClick={ this.clickhandler } />
              ..
             </div>
             )
         }

在clickhandler()中

 this.setState({ redirectTo: '/path/some/where' });

希望能有所帮助。让我知道。

我认为@rgommezz涵盖了大多数情况，除了一个我认为非常重要的情况。

// history is already a dependency or React Router, but if don't have it then try npm install save-dev history

import createHistory from "history/createBrowserHistory"

// in your function then call add the below 
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");

这允许我写一个简单的服务与动作/调用，我可以调用从任何组件做导航，而不需要在我的组件上做很多HoC…

目前还不清楚为什么以前没有人提供这种解决方案。我希望它能有所帮助，如果你看到任何问题，请告诉我。

由于没有其他方法来处理这个可怕的设计，所以我编写了一个使用withRouter HOC方法的通用组件。下面的例子是包装一个按钮元素，但你可以更改为任何你需要的可点击元素:

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const NavButton = (props) => (
  <Button onClick={() => props.history.push(props.to)}>
    {props.children}
  </Button>
);

NavButton.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }),
  to: PropTypes.string.isRequired
};

export default withRouter(NavButton);

用法:

<NavButton to="/somewhere">Click me</NavButton>