27691d5882
Use useRouter over Router and add a workaround for the issue #11639
30 lines
906 B
JavaScript
30 lines
906 B
JavaScript
import { useEffect } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import { initGA, logPageView } from '../utils/analytics'
|
|
|
|
const MyApp = ({ Component, pageProps }) => {
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
initGA()
|
|
// `routeChangeComplete` won't run for the first page load unless the query string is
|
|
// hydrated later on, so here we log a page view if this is the first render and
|
|
// there's no query string
|
|
if (!router.asPath.includes('?')) {
|
|
logPageView()
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
// Listen for page changes after a navigation or when the query changes
|
|
router.events.on('routeChangeComplete', logPageView)
|
|
return () => {
|
|
router.events.off('routeChangeComplete', logPageView)
|
|
}
|
|
}, [router.events])
|
|
|
|
return <Component {...pageProps} />
|
|
}
|
|
|
|
export default MyApp
|