Question

在组件中实现操作路由/导航有三种不同的方法。

使用 withRouter() 高阶函数：

withRouter() 高阶函数将注入 history 对象作为组件的 prop。该对象提供了 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>
))

使用 <Route> 组件和渲染属性模式：

<Route> 组件传递与 withRouter() 相同的属性，因此您将能够通过 history 属性访问到操作历史记录的方法。

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

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

使用上下文：

建议不要使用此选项，并将其视为不稳定的 API。

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

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}