我正在尝试使用 react-ga
库来实现 Google Analytics(分析),只要路线发生变化,该库就需要触发。我在 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#issuecomment-316427527
最佳答案
使用 react-router <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>
)
关于reactjs - React Router NavLink不触发history.listen()函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43523979/