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: teemingc

.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