notify component when route hash changes (#13894)

This resolves #13659
vercel · Aug 6, 2020 · eb4be22 · eb4be22
1 parent ebd1434
commit eb4be22
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 48 deletions.
diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts
@@ -488,6 +488,7 @@ export default class Router implements BaseRouter {
       Router.events.emit('hashChangeStart', as)
       this.changeState(method, url, as, options)
       this.scrollToHash(cleanedAs)
+      this.notify(this.components[this.route])
       Router.events.emit('hashChangeComplete', as)
       return true
     }

diff --git a/test/integration/client-navigation/pages/nav/hash-changes.js b/test/integration/client-navigation/pages/nav/hash-changes.js
@@ -1,53 +1,58 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 let count = 0
 
-export default class SelfReload extends Component {
-  static getInitialProps({ res }) {
-    if (res) return { count: 0 }
-    count += 1
+const HashChanges = ({ count }) => {
+  const router = useRouter()
 
-    return { count }
-  }
+  return (
+    <div id="hash-changes-page">
+      <Link href="#via-link">
+        <a id="via-link">Via Link</a>
+      </Link>
+      <a href="#via-a" id="via-a">
+        Via A
+      </a>
+      <Link href="/nav/hash-changes">
+        <a id="page-url">Page URL</a>
+      </Link>
+      <Link href="#">
+        <a id="via-empty-hash">Via Empty Hash</a>
+      </Link>
+      <Link href="#item-400">
+        <a id="scroll-to-item-400">Go to item 400</a>
+      </Link>
+      <Link href="#name-item-400">
+        <a id="scroll-to-name-item-400">Go to name item 400</a>
+      </Link>
+      <p>COUNT: {count}</p>
+      {Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
+        return (
+          <div key={`item-${i}`} id={`item-${i}`}>
+            {i}
+          </div>
+        )
+      })}
+      {Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
+        return (
+          <div key={`item-${i}`} name={`name-item-${i}`}>
+            {i}
+          </div>
+        )
+      })}
+      <div id="asPath">ASPATH: {router.asPath}</div>
+      <div id="pathname">PATHNAME: {router.pathname}</div>
+    </div>
+  )
+}
+
+HashChanges.getInitialProps = ({ res }) => {
+  if (res) return { count: 0 }
+  count += 1
 
-  render() {
-    return (
-      <div id="hash-changes-page">
-        <Link href="#via-link">
-          <a id="via-link">Via Link</a>
-        </Link>
-        <a href="#via-a" id="via-a">
-          Via A
-        </a>
-        <Link href="/nav/hash-changes">
-          <a id="page-url">Page URL</a>
-        </Link>
-        <Link href="#">
-          <a id="via-empty-hash">Via Empty Hash</a>
-        </Link>
-        <Link href="#item-400">
-          <a id="scroll-to-item-400">Go to item 400</a>
-        </Link>
-        <Link href="#name-item-400">
-          <a id="scroll-to-name-item-400">Go to name item 400</a>
-        </Link>
-        <p>COUNT: {this.props.count}</p>
-        {Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
-          return (
-            <div key={`item-${i}`} id={`item-${i}`}>
-              {i}
-            </div>
-          )
-        })}
-        {Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
-          return (
-            <div key={`item-${i}`} name={`name-item-${i}`}>
-              {i}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
+  return { count }
 }
+
+export default HashChanges
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
@@ -497,8 +497,6 @@ describe('Client Navigation', () => {
             .click()
             .eval('window.pageYOffset')
 
-          console.log(scrollPosition)
-
           expect(scrollPosition).toBe(16258)
 
           // Scrolls back to top when scrolling to `#` with no value.
@@ -534,6 +532,22 @@ describe('Client Navigation', () => {
           }
         }
       })
+
+      it('Should update asPath', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/nav/hash-changes')
+
+          await browser.elementByCss('#via-link').click()
+
+          const asPath = await browser.elementByCss('div#asPath').text()
+          expect(asPath).toBe('ASPATH: /nav/hash-changes#via-link')
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
     })
 
     describe('when hash change via A tag', () => {