From f4ac82a7b4dd54357f587358c69ead7eb57f988d Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 22 Jul 2022 14:07:37 +0200 Subject: [PATCH 1/2] Ensure hash on initial request is preserved in new router --- .../next/client/components/app-router.client.tsx | 6 +++++- test/e2e/app-dir/index.test.ts | 16 +++++++++++++++- test/lib/next-test-utils.js | 1 + 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/next/client/components/app-router.client.tsx b/packages/next/client/components/app-router.client.tsx index 41036c0e3ff7..a5ac17172dd5 100644 --- a/packages/next/client/components/app-router.client.tsx +++ b/packages/next/client/components/app-router.client.tsx @@ -82,7 +82,11 @@ export default function AppRouter({ }, pushRef: { pendingPush: false, mpaNavigation: false }, focusRef: { focus: false }, - canonicalUrl: initialCanonicalUrl, + canonicalUrl: + initialCanonicalUrl + + // Hash is read as the initial value for canonicalUrl in the browser + // This is safe to do as canonicalUrl can't be rendered, it's only used to control the history updates the useEffect further down. + (typeof window !== 'undefined' ? window.location.hash : ''), }) useEffect(() => { diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts index c05c91f88f29..3541809f8150 100644 --- a/test/e2e/app-dir/index.test.ts +++ b/test/e2e/app-dir/index.test.ts @@ -1,6 +1,6 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' -import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils' +import { fetchViaHTTP, renderViaHTTP, waitFor } from 'next-test-utils' import path from 'path' import cheerio from 'cheerio' import webdriver from 'next-webdriver' @@ -243,6 +243,20 @@ describe('app dir', () => { } ) + it('should handle hash in initial url', async () => { + const browser = await webdriver(next.url, '/dashboard#abc') + + try { + // Check if hash is preserved + expect(await browser.eval('window.location.hash')).toBe('#abc') + await waitFor(1000) + // Check again to be sure as it might be timed different + expect(await browser.eval('window.location.hash')).toBe('#abc') + } finally { + await browser.close() + } + }) + describe('', () => { // TODO-APP: fix development test it.skip('should hard push', async () => { diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js index 1bcb877dac75..0671b934e1e9 100644 --- a/test/lib/next-test-utils.js +++ b/test/lib/next-test-utils.js @@ -96,6 +96,7 @@ export function getFullUrl(appPortOrUrl, url, hostname) { parsedUrl.hash = parsedPathQuery.hash parsedUrl.search = parsedPathQuery.search parsedUrl.pathname = parsedPathQuery.pathname + parsedUrl.hash = parsedPathQuery.hash if (hostname && parsedUrl.hostname === 'localhost') { parsedUrl.hostname = hostname From 093732ac2a4aeb228ee031d1628d6e48907431c6 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Fri, 22 Jul 2022 09:00:02 -0500 Subject: [PATCH 2/2] Apply suggestions from code review --- test/lib/next-test-utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js index 0671b934e1e9..1bcb877dac75 100644 --- a/test/lib/next-test-utils.js +++ b/test/lib/next-test-utils.js @@ -96,7 +96,6 @@ export function getFullUrl(appPortOrUrl, url, hostname) { parsedUrl.hash = parsedPathQuery.hash parsedUrl.search = parsedPathQuery.search parsedUrl.pathname = parsedPathQuery.pathname - parsedUrl.hash = parsedPathQuery.hash if (hostname && parsedUrl.hostname === 'localhost') { parsedUrl.hostname = hostname