您还可以在无状态组件中使用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 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组件可能会更好。

这对我有效，不需要特殊进口：

<input 
  type="button" 
  name="back" 
  id="back" 
  class="btn btn-primary" 
  value="Back" 
  onClick={() => { this.props.history.goBack() }} 
/>

更新：2022：使用useNavigate的React Router v6.6.1

useHistory（）钩子现已弃用。如果您使用的是React Router 6，编程导航的正确方法如下：

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

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

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

带挂钩的React Router v5.1.0

如果您使用的是React>16.8.0和功能组件，则React Router>5.1.0中有一个新的useHistory钩子。

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

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

反应路由器v4

使用React Router的v4，有三种方法可以用于组件内的编程路由。

使用withRouter高阶组件。使用合成并渲染<Route>使用上下文。

React Router主要是历史库的包装器。历史记录处理与浏览器窗口的交互。历史记录为您提供浏览器和哈希历史记录。它还提供了一个内存历史，对于没有全局历史的环境非常有用。这在使用Node进行移动应用程序开发（react native）和单元测试时特别有用。

历史记录实例有两种导航方法：推送和替换。如果您将历史记录视为一个访问位置数组，push将向数组中添加一个新位置，replace将用新位置替换数组中的当前位置。通常，您在导航时需要使用push方法。

在React Router的早期版本中，您必须创建自己的历史实例，但在v4中，<BrowserRouter>、<HashRouter>和<MemoryRouter>组件将为您创建浏览器、哈希和内存实例。React Router使与路由器关联的历史实例的财产和方法通过路由器对象下的上下文可用。

1.使用withRouter高阶组件

withRouter高阶组件将注入历史对象作为组件的属性。这允许您访问push和replace方法，而不必处理上下文。

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

2.使用合成并渲染<Route>

<Route>组件不仅仅用于匹配位置。您可以渲染无路径路线，它将始终与当前位置匹配。<Route>组件传递与withRouter相同的属性，因此您可以通过历史属性访问历史方法。

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

3.使用上下文*

但你可能不应该

最后一个选项是只有当您觉得使用React的上下文模型时才应该使用的选项（React的context API在v16中是稳定的）。

const Button = (props, context) => (
  <button
    type='button'
    onClick={() => {
      // context.history.push === history.push
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
)

// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

1和2是实现的最简单的选择，因此对于大多数用例来说，它们是最好的选择。

这可能不是最好的方法，但。。。使用react router v4，下面的TypeScript代码可以为一些人提供一些想法。

在下面的渲染组件（例如LoginPage）中，可以访问router对象，只需调用router.transitionTo（'/home'）即可导航。

导航代码取自。

“react router”：“^4.0.0-2”，“反应”：“^15.3.1”，

从“react Router/BrowserRouter”导入路由器；从“react History/BrowserHistory”导入｛History｝；从“history/createBrowserHistory”导入createHistory；consthistory=createHistory（）；接口MatchWithPropsInterface{component:React.component的类型，router:路由器，历史：历史，确切地？：任何图案：字符串}类MatchWithProps扩展React.Component＜MatchWithPropsInterface，any＞{render（）{返回(<Match｛…this.props｝render={（matchProps）=>(React.createElement（this.props.component，this.props）)}/>)}}ReactDOM.渲染(<路由器>｛（｛路由器｝）=>(＜div＞<MatchWithProps justly pattern=“/”component=｛LoginPage｝router=｛router｝history=｛history｝/>＜MatchWithProps pattern＝“/login”component＝｛LoginPage｝router＝｛router｝history＝｛history｝/＞<MatchWithProps pattern=“/home”component=｛homepage｝router=｛router｝history=｛history｝/>＜缺少组件＝｛NotFoundView｝/＞</div>)}</路由器>，document.getElementById（'app'）);

根据JoséAntonio Postigo和Ben Wheeler先前的回答：

新奇之处？用TypeScript编写并使用修饰符或静态属性/字段

import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";

export interface INavigatorProps {
    router?: ReactRouter.History.History;
}

/**
 * Note: goes great with mobx
 * @inject("something") @withRouter @observer
 */
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
    navigate: (to: string) => void;
    constructor(props: INavigatorProps) {
        super(props);
        let self = this;
        this.navigate = (to) => self.props.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

/**
 * Non decorated
 */
export class Navigator2 extends Component<INavigatorProps, {}> {

    static contextTypes = {
        router: React.PropTypes.object.isRequired,
    };

    navigate: (to: string) => void;
    constructor(props: INavigatorProps, context: any) {
        super(props, context);
        let s = this;
        this.navigate = (to) =>
            s.context.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

无论今天安装了什么npm。

“react router”：“^3.0.0”和“@types/react router”：“^2.0.41”