Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
Fix props not updating when changing the locale and keeping hash (ver…
Browse files Browse the repository at this point in the history
…cel#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 vercel#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
  • Loading branch information
destruc7i0n authored Jun 23, 2021
1 parent 907ef21 commit b1c097e
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 1 deletion.
6 changes: 5 additions & 1 deletion packages/next/next-server/lib/router/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
i18n: {
locales: ['en', 'fr'],
defaultLocale: 'en',
},
}
27 changes: 27 additions & 0 deletions test/integration/i18n-support-same-page-hash-change/pages/about.js
Original file line number Diff line number Diff line change
@@ -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,
},
}
}
Original file line number Diff line number Diff line change
@@ -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,
}
}
Original file line number Diff line number Diff line change
@@ -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()
})
})

0 comments on commit b1c097e

Please sign in to comment.