में <Route /> बाहर इतिहास वस्तु का उपयोग करने के लिए कैसे प्रतिक्रिया रूटर 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 /> में एक्सेस नहीं कर सकता। हैडर घटक में इतिहास ऑब्जेक्ट प्राप्त करने का कोई तरीका है?

Answer 1

आप इसके लिए 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)