如何在 React Router v4 中访问 <Route /> 之外的历史对象答案

【问题标题】：How to access history object outside <Route /> in React Router v4如何在 React Router v4 中访问 <Route /> 之外的历史对象
【发布时间】：2017-03-04 10:16:48
【问题描述】：

我有以下代码：

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


const Routes = () => (
  <Router basename="/blog">
    <div>
      <Header />
      <Route exact path="/" component={Main}/>
      <Route path="/article/:id" component={ArticleView}/>
    </div>
  </Router>
)

我可以通过 Main 和 ArticleView 组件中的道具访问历史记录或匹配。但我无法在<Header /> 中访问它。有没有办法获取Header组件中的history对象？

【问题讨论】：

标签： react-router react-router-v4

【解决方案1】：

您可以为此使用withRouter HOC。

在您的 Header 组件被定义的地方，将导出包装在如下的 withRouter 调用中将使您的 Header 组件可以访问匹配、位置和历史记录

import {withRouter} from 'react-router'

class Header extends Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }
  render () {
    const { match, location, history } = this.props

    return <h2>The Header</h2>
  }
}

export default withRouter(Header)

【讨论】：

我认为 withRouter 仅在组件是的一部分时才有效。如果我错了，请纠正我。谢谢你:)
如果组件是的一部分，那么应该不需要使用 withRouter。除非我感到困惑。
嘿@Tayler，你很困惑哈哈。我的
不是的一部分。它在内，但不在内。所以我无法从那里访问这些道具。
泰勒的回答是正确的。您可以通过两种方式访问历史、匹配或位置：1. 通过withRouter wrapper 2.通过将 Header 传递给 Route：<Route component={Header} />
为我工作。谢谢@TylerMcGinnis