react-router - 如何在外部访问历史对象在反应路由器 v4

Question

我有以下代码：

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 组件中获取历史对象？

Answer 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)