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

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路由器v2

对于最新版本（v2.0.0-rc5），推荐的导航方法是直接推到历史单例。您可以在组件外部导航文档中看到这一点。

相关摘录：

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

如果使用更新的react router API，则需要在组件内部使用this.props中的历史记录，以便：

this.props.history.push('/some/path');

它还提供pushState，但对于每个记录的警告，它都是不推荐的。

如果使用react router redux，它提供了一个推送功能，您可以这样调度：

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

然而，这可能仅用于更改URL，而不是实际导航到页面。

在React Router v4中，我遵循这两种方式以编程方式进行路由。

this.props.history.push（“/某物/某物”）this.props.history.replace（“/ssomething/something”）

第二个

替换历史堆栈上的当前条目

要获取道具中的历史记录，您可能必须使用

带路由器

InReact路由器v6

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

function Invoices() {
  let navigate = useNavigate();
  return (
    <div>
      <NewInvoiceForm
        onSubmit={async event => {
          let newInvoice = await createInvoice(event.target);
          navigate(`/invoices/${newInvoice.id}`);
        }}
      />
    </div>
  );
}

React Router v6入门

也许不是最好的解决方案，但它可以完成任务：

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

// Create functional component Post
export default Post = () => (
    <div className="component post">

        <button className="button delete-post" onClick={() => {
            // ... delete post
            // then redirect, without page reload, by triggering a hidden Link
            document.querySelector('.trigger.go-home').click();
        }}>Delete Post</button>

        <Link to="/" className="trigger go-home hidden"></Link>

    </div>
);

基本上，与一个操作相关的逻辑（在本例中为删除后操作）最终将调用重定向触发器。这并不理想，因为您将在标记中添加DOM节点“触发器”，以便在需要时方便地调用它。此外，您将直接与DOM交互，这在React组件中可能是不需要的。

不过，这种类型的重定向并不经常需要。因此，在组件标记中添加一两个额外的隐藏链接并不会造成太大的伤害，特别是如果您为它们提供了有意义的名称。

警告：此答案仅涵盖1.0之前的ReactRouter版本之后，我将用1.0.0-rc1用例更新这个答案！

你也可以在没有混合的情况下这样做。

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

有上下文的问题是，除非在类上定义contextType，否则它是不可访问的。

至于什么是上下文，它是一个对象，就像props一样，从父对象传递给子对象，但它是隐式传递的，不需要每次都重新声明props。看见https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html