React Router NavLink nicht auslösen history.listen() Funktion

Question

Ich versuche, Google Analytics mit der react-ga Bibliothek zu implementieren, die ausgelöst werden muss, wenn sich die Route ändert. Ich habe folgendes Setup in App.js:

import createBrowserHistory from 'history/createBrowserHistory'; 
... 

const history = createBrowserHistory(); 
history.listen((location) => { 
    console.log('ANALYTICS CODE GOES HERE', location); 
}); 

class App extends Component { 
    render() { 
     return (
      <Provider store={...}> 
       <Router history={history}> 
        .... 
       </Router> 
      </Provider> 
     ); 
    } 
} 

export default App; 

Wenn ich auf eine NavLink während meiner App klicken, wird die Routenänderungen und lädt die entsprechende Komponente, aber die history.listen() Funktion nie ausgelöst. Wenn ich jedoch die Back/Forward-Funktionalität des Browsers verwende, wird sie ausgelöst.

<NavLink to="/account" activeClassName="active">ACCOUNT</NavLink> 

Wie ich höre Änderungen Route durch eine NavLink ausgelöst?

Edit: eine weitere Diskussion hier stattfindet: https://github.com/react-ga/react-ga/issues/122#issuecomment-316427527

Answer 1

Verwenden Sie eine react-router <Route /> Komponente als Wrapper für Ihre Tracking-Funktion - die Route jedes Mal die Lage ändert Wieder macht. Zum Beispiel:

import React from 'react' 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
import ReactGA from 'react-ga' 

ReactGA.initialize('UA-00000000-1') 

const tracker = ({location}) => { 
    // console.log('tracking', location.pathname) 
    ReactGA.set({page: location.pathname}) 
    ReactGA.pageview(location.pathname) 
    return null 
} 

const App = (props) => (
    <Router> 
    <div> 
     <Route render={tracker} /> 
     ... 
    </div> 
    </Router> 
)