fix: correctly detect internal links when hash router is used (#13296)

fixes #13287

This PR fixes the client-side external link evaluation so that when using the hash router, accessing /index.html is considered an internal link. This prevents the page from reloading infinitely because the router incorrectly considered /index.html an external link.

There's also a slight doc change. Instead of suggesting all links start with /#/, suggesting links start with # allows the router to preserve the /index.html pathname. For example, links to /about should be #/about instead of /#/about so that it navigates to /index.html#/about.

Author: eltigerchino

.changeset/green-flowers-heal.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: prevent infinite reload when using the hash router and previewing `/index.html`

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

@@ -653,7 +653,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.
+		 *   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/utils.js

@@ -311,7 +311,7 @@ export function is_external_url(url, base, hash_routing) {
 	}
 
 	if (hash_routing) {
-		if (url.pathname === base + '/') {
+		if (url.pathname === base + '/' || url.pathname === base + '/index.html') {
 			return false;
 		}
 

packages/kit/types/index.d.ts

@@ -635,7 +635,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.
+			 *   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