रिएक्ट राउटर "परिवर्तन पर" घटना?

Question

मैं अपने एकल पेज ऐप पर एक एनालिटिक्स हैंडलर स्थापित करना चाहता हूं, और मुख्य मार्ग के तहत हर रूट परिवर्तन को कैप्चर करना चाहता हूं। मुझे पता है कि ReactRouter onEnter रूट इवेंट प्रदान करता है; हालांकि, मुझे प्रत्येक मार्ग पर हैंडलर को अलग से स्थापित करने की आवश्यकता होगी। मैं मार्ग का उप-वर्ग बना सकता हूं जो स्वचालित रूप से onEnter आबादी वाला है, लेकिन फिर मैं onEnter को ओवरराइड करने में सक्षम नहीं हूं और फिर भी एनालिटिक्स ट्रैकिंग हैंडलर को ट्रैक कर सकता हूं।

किसी रूट रूट रूट में किसी भी बदलाव को सुनने का सबसे अच्छा तरीका क्या होगा?

Answer 1

आप एक मार्ग परिवर्तन का पता लगाने के लिए प्रतिक्रिया रूटर willTransitionTo स्थिर फ़ंक्शन का उपयोग करें और अपने ga() समारोह कॉल में transition.path फेंकना, इसलिए की तरह कर सकते हैं::

var App = React.createClass({ 
    mixins: [Router.State], 
    statics: { 
    willTransitionTo: function(transition, params, query, props) { 
     ga('send', 'pageview', {'page': transition.path}); 
    } 
    }, 
    render: function() { 
    return (
     <div> 
     <RouteHandler /> 
     </div> 
    ); 
    } 
}); 

इसलिए, निम्नलिखित कोड तरह से मैं चाहता था काम करता है

this answer में एक और पूर्ण उदाहरण देखा जा सकता है।

Answer 2

उत्तर (मूर्तिकला) मुझे चेहरे पर घूर रहा था।

जब आप राउटर शुरू करते हैं, तो आप Router.run(routes, callback) पर कॉल करते हैं। प्रत्येक मार्ग परिवर्तन पर कॉलबैक को बुलाया जाता है।

Router.run(routes, function (Handler) { 
    doSomethingAnalytics(document.location.hash); 
    React.render(<Handler/>, document.body.querySelector('#content')); 
}); 

Answer 3

इस समारोह हर मार्ग कहा जाता है

const history = syncHistoryWithStore(browserHistory, store); 

history.listen((location)=>{ 
    console.log(location) 
}); 

Answer 4

बदल गया है प्रतिक्रिया: v15.x, प्रतिक्रिया रूटर: v4.x

घटकों/कोर/App.js:

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { BrowserRouter } from 'react-router-dom'; 


class LocationListener extends Component { 
    static contextTypes = { 
    router: PropTypes.object 
    }; 

    componentDidMount() { 
    this.handleLocationChange(this.context.router.history.location); 
    this.unlisten = 
this.context.router.history.listen(this.handleLocationChange); 
    } 

    componentWillUnmount() { 
    this.unlisten(); 
    } 

    handleLocationChange(location) { 
    // your staff here 
    console.log(`- - - location: '${location.pathname}'`); 
    } 

    render() { 
    return this.props.children; 
    } 
}  

export class App extends Component { 
    ... 

    render() { 
    return (
     <BrowserRouter> 
     <LocationListener> 
     ... 
     </LocationListener> 
     </BrowserRouter> 
    ); 
    } 
} 

index.js:

import App from 'components/core/App'; 

render(<App />, document.querySelector('#root'));