Fix next/link can't jump to non-latin anchors

packages/next/shared/lib/router/router.ts

@@ -1389,6 +1389,12 @@ export default class Router implements BaseRouter {
       }
       Router.events.emit('routeChangeComplete', as, routeProps)
 
+      // A hash mark # is the optional last part of a URL
+      const hashRegex = /#.+$/
+      if (shouldScroll && hashRegex.test(as)) {
+        this.scrollToHash(as)
+      }
+
       return true
     } catch (err) {
       if (isError(err) && err.cancelled) {
@@ -1689,15 +1695,17 @@ export default class Router implements BaseRouter {
       return
     }
 
+    // Decode hash to make non-latin anchor works.
+    const rawHash = decodeURIComponent(hash)
     // First we check if the element by id is found
-    const idEl = document.getElementById(hash)
+    const idEl = document.getElementById(rawHash)
     if (idEl) {
       idEl.scrollIntoView()
       return
     }
     // If there's no element with the id, we check the `name` property
     // To mirror browsers
-    const nameEl = document.getElementsByName(hash)[0]
+    const nameEl = document.getElementsByName(rawHash)[0]
     if (nameEl) {
       nameEl.scrollIntoView()
     }

test/integration/client-navigation/pages/nav/hash-changes.js

@@ -32,6 +32,9 @@ const HashChanges = ({ count }) => {
           Go to name item 400 (no scroll)
         </a>
       </Link>
+      <Link href="#中文">
+        <a id="scroll-to-cjk-anchor">Go to CJK anchor</a>
+      </Link>
       <p>COUNT: {count}</p>
       {Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
         return (
@@ -52,6 +55,7 @@ const HashChanges = ({ count }) => {
       </Link>
       <div id="asPath">ASPATH: {router.asPath}</div>
       <div id="pathname">PATHNAME: {router.pathname}</div>
+      <div id="中文">CJK anchor</div>
     </div>
   )
 }

test/integration/client-navigation/pages/nav/index.js

@@ -121,6 +121,9 @@ export default class extends Component {
         <Link href="/nav/hash-changes#item-400">
           <a id="scroll-to-hash">Scroll to hash</a>
         </Link>
+        <Link href="/nav/hash-changes#中文">
+          <a id="scroll-to-cjk-hash">Scroll to CJK hash</a>
+        </Link>
       </div>
     )
   }

test/integration/client-navigation/test/index.test.js

@@ -626,6 +626,13 @@ describe('Client Navigation', () => {
           )
 
           expect(scrollPositionAfterTopHash).toBe(0)
+
+          // Scrolls to cjk anchor on the page
+          await browser.elementByCss('#scroll-to-cjk-anchor').click()
+
+          const scrollPositionCJKHash = await browser.eval('window.pageYOffset')
+
+          expect(scrollPositionCJKHash).toBe(17436)
         } finally {
           if (browser) {
             await browser.close()
@@ -691,6 +698,26 @@ describe('Client Navigation', () => {
         }
       })
 
+      it('should scroll to the specified CJK position to a new page', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/nav')
+
+          // Scrolls to CJK anchor on the page
+          await browser
+            .elementByCss('#scroll-to-cjk-hash')
+            .click()
+            .waitForElementByCss('#hash-changes-page')
+
+          const scrollPosition = await browser.eval('window.pageYOffset')
+          expect(scrollPosition).toBe(17436)
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+
       it('Should update asPath', async () => {
         let browser
         try {