-
Notifications
You must be signed in to change notification settings - Fork 26k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: added support for query params on 404 page
Previously, query parameters were not available on 404 pages because calling the router methods would change the pathname in the browser. This change adds support for the query to update for those pages without updating the path to include the basePath.
- Loading branch information
Showing
5 changed files
with
158 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { NextResponse } from 'next/server' | ||
|
|
||
| export function middleware() { | ||
| return NextResponse.next() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { useRouter } from 'next/router' | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| function transform(router) { | ||
| return { | ||
| pathname: router.pathname, | ||
| asPath: router.asPath, | ||
| query: Object.entries(router.query) | ||
| .map(([key, value]) => [key, value].join('=')) | ||
| .join('&'), | ||
| isReady: router.isReady ? 'true' : 'false', | ||
| } | ||
| } | ||
|
|
||
| function Debug({ name, value }) { | ||
| return ( | ||
| <> | ||
| <dt>{name}</dt> | ||
| <dd id={name}>{value}</dd> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default function Custom404() { | ||
| const router = useRouter() | ||
| const [debug, setDebug] = useState({}) | ||
|
|
||
| useEffect(() => { | ||
| setDebug(transform(router)) | ||
| }, [router]) | ||
|
|
||
| return ( | ||
| <dl> | ||
| <Debug name="pathname" value={debug.pathname} /> | ||
| <Debug name="asPath" value={debug.asPath} /> | ||
| <Debug name="query" value={debug.query} /> | ||
| <Debug name="isReady" value={debug.isReady} /> | ||
| </dl> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { createNext, FileRef } from 'e2e-utils' | ||
| import path from 'path' | ||
| import { NextInstance } from 'test/lib/next-modes/base' | ||
| import webdriver from 'next-webdriver' | ||
|
|
||
| const basePath = '/docs' | ||
| const i18n = { defaultLocale: 'en-ca', locales: ['en-ca', 'en-fr'] } | ||
|
|
||
| const table = [ | ||
| // Including the i18n and no basePath | ||
| { basePath: undefined, i18n, middleware: false }, | ||
| // Including the basePath and no i18n | ||
| { basePath, i18n: undefined, middleware: false }, | ||
| // Including both i18n and basePath | ||
| { basePath, i18n, middleware: false }, | ||
| // Including no basePath or i18n | ||
| { basePath: undefined, i18n: undefined, middleware: false }, | ||
| // Including middleware. | ||
| { basePath: undefined, i18n: undefined, middleware: true }, | ||
| ] | ||
|
|
||
| describe.each(table)( | ||
| '404-page-router with basePath of $basePath and i18n of $i18n and middleware %middleware', | ||
| ({ middleware, ...nextConfig }) => { | ||
| let next: NextInstance | ||
|
|
||
| beforeAll(async () => { | ||
| const files = { | ||
| pages: new FileRef(path.join(__dirname, 'app/pages')), | ||
| } | ||
|
|
||
| if (middleware) { | ||
| files['middleware.js'] = new FileRef( | ||
| path.join(__dirname, 'app/middleware.js') | ||
| ) | ||
| } | ||
|
|
||
| next = await createNext({ | ||
| files, | ||
| nextConfig, | ||
| }) | ||
| }) | ||
|
|
||
| afterAll(() => next.destroy()) | ||
|
|
||
| describe.each(['/not/a/real/page?with=query', '/not/a/real/page'])( | ||
| 'for url %s', | ||
| (url) => { | ||
| it('should have the correct router parameters after it is ready', async () => { | ||
| const query = url.split('?')[1] ?? '' | ||
| const browser = await webdriver(next.url, url) | ||
|
|
||
| try { | ||
| await browser.waitForCondition( | ||
| 'document.getElementById("isReady")?.innerText === "true"' | ||
| ) | ||
|
|
||
| expect(await browser.elementById('pathname').text()).toEqual('/404') | ||
| expect(await browser.elementById('asPath').text()).toEqual(url) | ||
| expect(await browser.elementById('query').text()).toEqual(query) | ||
| } finally { | ||
| await browser.close() | ||
| } | ||
| }) | ||
| } | ||
| ) | ||
| } | ||
| ) |