प्रतिक्रिया राउटर v4 में रूट परिवर्तनों को कैसे सुनें?

Question

मेरे पास कुछ बटन हैं जो मार्ग के रूप में कार्य करते हैं। प्रत्येक बार मार्ग बदल जाता है, मैं यह सुनिश्चित करना चाहता हूं कि सक्रिय परिवर्तन वाला बटन।

क्या प्रतिक्रिया राउटर v4 में मार्ग परिवर्तन सुनने का कोई तरीका है?

Answer 1

मैं withRouter का उपयोग location प्रोप मिलता है। घटक एक नया मार्ग की वजह से अद्यतन किया जाता है, मैं जाँच करता है, तो मान बदल:

@withRouter 
class App extends React.Component { 

    static propTypes = { 
    location: React.PropTypes.object.isRequired 
    } 

    // ... 

    componentDidUpdate(prevProps) { 
    if (this.props.location !== prevProps.location) { 
     this.onRouteChanged(); 
    } 
    } 

    onRouteChanged() { 
    console.log("ROUTE CHANGED"); 
    } 

    // ... 
    render(){ 
    return <Switch> 
     <Route path="/" exact component={HomePage} /> 
     <Route path="/checkout" component={CheckoutPage} /> 
     <Route path="/success" component={SuccessPage} /> 
     // ... 
     <Route component={NotFound} /> 
     </Switch> 
    } 
} 

आशा है कि यह मदद करता है

Answer 2

आपको history v4 lib का उपयोग करना चाहिए।

there

history.listen((location, action) => { 
    console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`) 
    console.log(`The last navigation action was ${action}`) 
}) 

Answer 3

से उदाहरण से ऊपर पर विस्तार करने के लिए आपको इतिहास वस्तु को प्राप्त करने के लिए की आवश्यकता होगी। आप BrowserRouter उपयोग कर रहे हैं आप withRouter आयात और क्रम में हॉक के साथ अपने घटक लपेट रंगमंच की सामग्री के माध्यम से उपयोग करने के लिए इतिहास की वस्तुओं के गुण, और कार्यों के लिए कर सकते हैं।

import { withRouter } from 'react-router-dom'; 

const myComponent = ({ listen }) => { 

    listen((location, action) => { 
     // location is an object like window.location 
     console.log(action, location.pathname, location.state) 
    }); 

    return <div>...</div>; 
}; 

export default withRouter(myComponent); 

केवल एक चीज के बारे में पता होना करने के लिए है कि withRoutes और history तक पहुँचने के लिए सबसे अन्य तरीकों से इसे में वस्तु वे de-संरचना के रूप में रंगमंच की सामग्री को प्रदूषित करने लगते है।