fix with-loading example for next 11 (#26569)

## Documentation / Examples - [X] Make sure the linting passes This PR updates the with-loading example to follow the documentation of router events for next 11
vercel · Jun 24, 2021 · bbedbb7 · bbedbb7
1 parent 18a333e
commit bbedbb7
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/examples/with-loading/pages/_app.js b/examples/with-loading/pages/_app.js
@@ -1,16 +1,32 @@
-import Router from 'next/router'
+import { useEffect } from 'react'
 import Link from 'next/link'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import NProgress from 'nprogress'
 
-Router.events.on('routeChangeStart', (url) => {
-  console.log(`Loading: ${url}`)
-  NProgress.start()
-})
-Router.events.on('routeChangeComplete', () => NProgress.done())
-Router.events.on('routeChangeError', () => NProgress.done())
-
 export default function App({ Component, pageProps }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleStart = (url) => {
+      console.log(`Loading: ${url}`)
+      NProgress.start()
+    }
+    const handleStop = () => {
+      NProgress.done()
+    }
+
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeComplete', handleStop)
+    router.events.on('routeChangeError', handleStop)
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
+
   return (
     <>
       <Head>