が反応ルータ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> 
) 

私がメインで小道具やArticleViewコンポーネントを介して歴史や試合にアクセスすることができます。しかし、<Header />でアクセスできません。 Headerコンポーネントで履歴オブジェクトを取得する方法はありますか？

Answer 1

これにはwithRouter HOCを使用できます。私は、コンポーネントがの一部である場合withRouterだけうまくいくと思う

あなたのヘッダー・コンポーネントが定義されている場合は、以下のような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)