React Router NavLink не вызывает функцию history.listen()
Я пытаюсь внедрить Google Analytics, используя react-ga
библиотека, которая должна срабатывать при изменении маршрута. У меня есть следующие настройки в 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;
Когда я нажимаю на NavLink
в моем приложении маршрут меняется и загружается соответствующий компонент, но history.listen()
функция никогда не срабатывает. Однако, если я использую функцию браузера "назад / вперед", он срабатывает.
<NavLink to="/account" activeClassName="active">ACCOUNT</NavLink>
Как мне прослушать изменения маршрута, вызванные NavLink
?
Изменить: дальнейшее обсуждение происходит здесь: https://github.com/react-ga/react-ga/issues/122
1 ответ
Используйте реагирующий роутер<Route />
компонент в качестве оболочки для вашей функции отслеживания - маршрут перерисовывается каждый раз, когда изменяется местоположение. Например:
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>
)