ReactRouter "on change" событие?

Question

Я хочу установить обработчик аналитики на моем одностраничном приложении и хотел бы зафиксировать каждое изменение маршрута в основном маршруте. Я признаю, что ReactRouter предлагает событие маршрута onEnter; однако для этого потребуется отдельная установка обработчика на каждом маршруте. Я мог бы создать подкласс Route, который автоматически заполняет onEnter, но тогда я бы не смог переопределить onEnter и по-прежнему держать обработчик отслеживания аналитики.

Что было бы лучшим способом прослушать любые изменения в рамках данного корневого маршрута?

Answer 1

Вы можете использовать willTransitionTo статической функции среагировать-маршрутизатор для обнаружения изменения маршрута и испустить transition.path в вызове функции ga(), например, так:

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

React: v15.x, React Маршрутизатор: 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'));