Skip to content

Commit

Permalink
fix: correctly detect internal links when hash router is used (#13296)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
eltigerchino authored Jan 15, 2025
1 parent 9dc5c0e commit 1c77e28
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/green-flowers-heal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

fix: prevent infinite reload when using the hash router and previewing `/index.html`
2 changes: 1 addition & 1 deletion packages/kit/src/exports/public.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/kit/src/runtime/client/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/kit/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 1c77e28

Please sign in to comment.