Fix props not updating when changing the locale and keeping hash (#26205

)

Currently, there is only a `hashChangeStart` and subsequent `hashChangeComplete` event and no props update (which would be used to get translations, etc.).
Happy for any feedback

fixes #23467

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes

packages/next/next-server/lib/router/router.ts

@@ -933,7 +933,11 @@ export default class Router implements BaseRouter {
     // WARNING: `_h` is an internal option for handing Next.js client-side
     // hydration. Your app should _never_ use this property. It may change at
     // any time without notice.
-    if (!(options as any)._h && this.onlyAHashChange(cleanedAs)) {
+    if (
+      !(options as any)._h &&
+      this.onlyAHashChange(cleanedAs) &&
+      !localeChange
+    ) {
       this.asPath = cleanedAs
       Router.events.emit('hashChangeStart', as, routeProps)
       // TODO: do we need the resolved href when only a hash change?

test/integration/i18n-support-same-page-hash-change/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr'],
+    defaultLocale: 'en',
+  },
+}

test/integration/i18n-support-same-page-hash-change/pages/about.js

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+
+  return (
+    <>
+      <p id="props-locale">{props.locale}</p>
+      <p id="router-locale">{router.locale}</p>
+      <Link
+        href={{ pathname: router.pathname, query: router.query, hash: '#hash' }}
+        locale={router.locale === 'fr' ? 'en' : 'fr'}
+      >
+        <a id="change-locale">Change Locale</a>
+      </Link>
+    </>
+  )
+}
+
+export const getStaticProps = async ({ locale }) => {
+  return {
+    props: {
+      locale,
+    },
+  }
+}

test/integration/i18n-support-same-page-hash-change/pages/posts/[...slug].js

@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+
+  return (
+    <>
+      <p id="props-locale">{props.locale}</p>
+      <p id="router-locale">{router.locale}</p>
+      <Link
+        href={{ pathname: router.pathname, query: router.query, hash: '#hash' }}
+        locale={router.locale === 'fr' ? 'en' : 'fr'}
+      >
+        <a id="change-locale">Change Locale</a>
+      </Link>
+    </>
+  )
+}
+
+export const getStaticProps = async ({ locale }) => {
+  return {
+    props: {
+      locale,
+    },
+  }
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: [
+      {
+        params: { slug: ['a'] },
+        locale: 'en',
+      },
+      {
+        params: { slug: ['a'] },
+        locale: 'fr',
+      },
+    ],
+    fallback: false,
+  }
+}

test/integration/i18n-support-same-page-hash-change/test/index.test.js

@@ -0,0 +1,81 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import {
+  launchApp,
+  killApp,
+  findPort,
+  nextBuild,
+  nextStart,
+  check,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '..')
+let appPort
+let app
+
+const runTests = () => {
+  it('should update props on locale change with same hash', async () => {
+    const browser = await webdriver(appPort, `/about#hash`)
+
+    await browser.elementByCss('#change-locale').click()
+
+    await check(() => browser.eval('window.location.pathname'), '/fr/about')
+    await check(() => browser.eval('window.location.hash'), '#hash')
+
+    expect(await browser.elementByCss('#router-locale').text()).toBe('fr')
+    expect(await browser.elementByCss('#props-locale').text()).toBe('fr')
+
+    await browser.elementByCss('#change-locale').click()
+
+    await check(() => browser.eval('window.location.pathname'), '/about')
+    await check(() => browser.eval('window.location.hash'), '#hash')
+
+    expect(await browser.elementByCss('#router-locale').text()).toBe('en')
+    expect(await browser.elementByCss('#props-locale').text()).toBe('en')
+  })
+
+  it('should update props on locale change with same hash (dynamic page)', async () => {
+    const browser = await webdriver(appPort, `/posts/a#hash`)
+
+    await browser.elementByCss('#change-locale').click()
+
+    await check(() => browser.eval('window.location.pathname'), '/fr/posts/a')
+    await check(() => browser.eval('window.location.hash'), '#hash')
+
+    expect(await browser.elementByCss('#router-locale').text()).toBe('fr')
+    expect(await browser.elementByCss('#props-locale').text()).toBe('fr')
+
+    await browser.elementByCss('#change-locale').click()
+
+    await check(() => browser.eval('window.location.pathname'), '/posts/a')
+    await check(() => browser.eval('window.location.hash'), '#hash')
+
+    expect(await browser.elementByCss('#router-locale').text()).toBe('en')
+    expect(await browser.elementByCss('#props-locale').text()).toBe('en')
+  })
+}
+
+describe('Hash changes i18n', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+    runTests(true)
+  })
+
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+    runTests()
+  })
+})