fix: do not mutate URL during reroute logic (#13222)

fixes #13220

Author: dummdidumm

.changeset/rude-plants-rest.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: do not mutate URL during reroute logic

packages/kit/src/exports/public.d.ts

@@ -622,6 +622,7 @@ export interface KitConfig {
 		 * What type of client-side router to use.
 		 * - `'pathname'` is the default and means the current URL pathname determines the route
 		 * - `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.
+		 *   It comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with /#/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.
 		 *
 		 * @default "pathname"
 		 * @since 2.14.0

packages/kit/src/runtime/client/client.js

@@ -1191,13 +1191,15 @@ function get_navigation_intent(url, invalidating) {
 		rerouted = app.hooks.reroute({ url: new URL(url) }) ?? url;
 
 		if (typeof rerouted === 'string') {
+			const tmp = new URL(url); // do not mutate the incoming URL
+
 			if (app.hash) {
-				url.hash = rerouted;
+				tmp.hash = rerouted;
 			} else {
-				url.pathname = rerouted;
+				tmp.pathname = rerouted;
 			}
 
-			rerouted = url;
+			rerouted = tmp;
 		}
 	} catch (e) {
 		if (DEV) {

packages/kit/test/apps/basics/src/routes/reroute/basic/b/+page.svelte

@@ -1 +1,5 @@
-<h1>Successfully rewritten</h1>
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>Successfully rewritten, URL should still show a: {page.url.pathname}</h1>

packages/kit/test/apps/basics/test/client.test.js

@@ -1184,7 +1184,9 @@ test.describe('reroute', () => {
 	test('Apply reroute during client side navigation', async ({ page }) => {
 		await page.goto('/reroute/basic');
 		await page.click("a[href='/reroute/basic/a']");
-		expect(await page.textContent('h1')).toContain('Successfully rewritten');
+		expect(await page.textContent('h1')).toContain(
+			'Successfully rewritten, URL should still show a: /reroute/basic/a'
+		);
 	});
 
 	test('Apply reroute after client-only redirects', async ({ page }) => {

packages/kit/test/apps/basics/test/server.test.js

@@ -642,7 +642,9 @@ test.describe('Miscellaneous', () => {
 test.describe('reroute', () => {
 	test('Apply reroute when directly accessing a page', async ({ page }) => {
 		await page.goto('/reroute/basic/a');
-		expect(await page.textContent('h1')).toContain('Successfully rewritten');
+		expect(await page.textContent('h1')).toContain(
+			'Successfully rewritten, URL should still show a: /reroute/basic/a'
+		);
 	});
 
 	test('Returns a 500 response if reroute throws an error on the server', async ({ page }) => {

packages/kit/test/apps/hash-based-routing/test/test.js

@@ -72,13 +72,13 @@ test.describe('hash based navigation', () => {
 		await page.locator('a[href="/#/reroute-a"]').click();
 		await expect(page.locator('p')).toHaveText('rerouted');
 		let url = new URL(page.url());
-		expect(url.hash).toBe('#/rerouted');
+		expect(url.hash).toBe('#/reroute-a');
 
 		await page.goto('/');
 
 		await page.locator('a[href="/#/reroute-b"]').click();
 		await expect(page.locator('p')).toHaveText('rerouted');
 		url = new URL(page.url());
-		expect(url.hash).toBe('#/rerouted');
+		expect(url.hash).toBe('#/reroute-b');
 	});
 });

packages/kit/types/index.d.ts

@@ -604,6 +604,7 @@ declare module '@sveltejs/kit' {
 			 * What type of client-side router to use.
 			 * - `'pathname'` is the default and means the current URL pathname determines the route
 			 * - `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.
+			 *   It comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with /#/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.
 			 *
 			 * @default "pathname"
 			 * @since 2.14.0