您还可以在无状态组件中使用useHistory钩子。文档示例：

import { useHistory } from "react-router"

function HomeButton() {
  const history = useHistory()

  return (
    <button type="button" onClick={() => history.push("/home")}>
      Go home
    </button>
  )
}

注意：在中添加了挂钩react-router@5.1.0并且需要反应@>=16.8

React路由器v6+答案

TL；DR：您可以使用新的useNavigate钩子。

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

function Component() {
  let navigate = useNavigate();
  // Somewhere in your code, e.g. inside a handler:
  navigate("/posts"); 
}

useNavigate钩子返回一个可用于编程导航的函数。

反应路由器文档中的示例

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
    // replace: true will replace the current entry in 
    // the history stack instead of adding a new one.

  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

React Router 5.1.0+应答（使用钩子和React>16.8）

您可以使用Functional Components上的useHistory挂钩，并以编程方式导航：

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

function HomeButton() {
  let history = useHistory();
  // use history.push('/some/path') here
};

React Router 4.0.0+答案

在4.0及以上版本中，将历史记录用作组件的道具。

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

注意：如果＜Route＞未呈现组件，则此.props.history不存在。您应该使用＜Route path＝“…”component＝｛YourComponent｝/＞在YourComponent中具有this.props.history

React路由器3.0.0+答案

在3.0及以上版本中，将路由器用作组件的道具。

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

React路由器2.4.0+答案

在2.4及以上版本中，使用更高阶的组件将路由器作为组件的道具。

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes
Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

React Router 2.0.0+答案

此版本与1.x向后兼容，因此无需升级指南。仅仅通过这些例子就足够了。

也就是说，如果您希望切换到新模式，路由器内有一个browserHistory模块，您可以使用

从“react router”导入｛browserHistory｝

现在，您可以访问浏览器历史记录，因此可以执行推送、替换等操作。例如：

browserHistory.push（'/some/path'）

进一步阅读：历史和航行

---

React Router 1.x.x答案

我不会详细介绍升级。您可以在《升级指南》中阅读相关内容

这个问题的主要变化是从导航混合到历史。现在它使用浏览器历史记录API来更改路由，因此我们将从现在开始使用pushState（）。

下面是使用Mixin的示例：

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

请注意，此历史记录来自rackt/History项目。不是来自React Router本身。

如果您出于某种原因（可能是因为ES6类）不想使用Mixin，那么您可以从this.props.history中访问从路由器获得的历史记录。它将仅对路由器渲染的组件可用。因此，如果您想在任何子组件中使用它，则需要通过props将其作为属性传递。

您可以在他们的1.0.x文档中阅读有关新版本的更多信息

下面是一个关于在组件外部导航的帮助页面

它建议获取一个引用history=createHistory（），并对其调用replaceState。

React路由器0.13.x答案

我也遇到了同样的问题，只能通过带有react路由器的Navigation mixin找到解决方案。

我是这样做的

import React from 'react';
import {Navigation} from 'react-router';

let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

我能够在不需要访问.context的情况下调用transitionTo（）

或者你可以试试ES6高级课程

import React from 'react';

export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
}

Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired
};

React路由器Redux注意：如果您使用的是Redux，还有一个项目叫做React Router Redux为您提供redux绑定ReactRouter，使用与React Redux会

React Router Redux有一些可用的方法，允许从内部动作创建者进行简单的导航。对于在React Native中拥有现有架构的人来说，这些模式尤其有用，并且他们希望在React Web中以最小的样板开销使用相同的模式。

探索以下方法：

推（位置）替换（位置）go（数字）goBack（）goForward（）

以下是Redux Thunk的用法示例：

./actioncreators.js

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.js

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL
</button>

在基于类的组件中编程导航。

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

class MyComponent extends React.Component{
    state = {rpath: null}

    const goTo = (path) => this.setState({rpath: path});

    render(){
        if(this.state.rpath){
            return <Redirect to={this.state.rpath}/>
        }
        .....
        .....
    }
}

以下是如何使用带有ES6的react router v2.0.0来实现这一点。react路由器已远离mixin。

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

如果您碰巧通过react router redux将RR4与redux配对，那么也可以使用react router-redux中的路由操作创建器。

import { push, replace, ... } from 'react-router-redux'

class WrappedComponent extends React.Component {
  handleRedirect(url, replaceState = true) {
    replaceState
      ? this.props.dispatch(replace(url))
      : this.props.dispatch(push(url))
  }
  render() { ... }
}

export default connect(null)(WrappedComponent)

如果您使用redux thunk/saga来管理异步流，请在redux操作中导入上述操作创建者，并使用mapDispatchToProps连接到React组件可能会更好。

以下是最简单、最干净的方法，大约是当前的React Router 3.0.0和ES6：

使用ES6反应路由器3.x.x：

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
export default withRouter(Example);

或者，如果不是默认类，则导出如下：

withRouter(Example);
export { Example };

注意，在3.x.x中，<Link>组件本身使用router.push，因此您可以传递任何传递<Linkto=标记的内容，例如：

   this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'