web-dev-qa-db-ja.com

React Routerv4の<Route />の外部の履歴オブジェクトにアクセスする方法

私はこの次のコードを持っています：

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 />ではアクセスできません。ヘッダーコンポーネントで履歴オブジェクトを取得する方法はありますか？

react-routerreact-router-v4
10
Tahnik Mustasin

これには withRouter HOCを使用できます。

ヘッダーコンポーネントが定義されている場合、以下のようにwithRouter呼び出しでエクスポートをラップすると、ヘッダーコンポーネントに一致、場所、履歴へのアクセス権が与えられます。

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)
24
Tyler McGinnis