diff --git a/.changeset/two-cats-approve.md b/.changeset/two-cats-approve.md new file mode 100644 index 0000000000..7756dfdd67 --- /dev/null +++ b/.changeset/two-cats-approve.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: repair `href` attribute mismatches diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 7e42efae11..9d9b4054d6 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -89,7 +89,11 @@ export function set_attribute(element, attribute, value, skip_warning) { if (hydrating) { attributes[attribute] = element.getAttribute(attribute); - if (attribute === 'src' || attribute === 'href' || attribute === 'srcset') { + // Don't include href: When using a base path, SvelteKit will by default render relative URLs on the server + // and use root-relative links on the client. While the href would resolve to the same URL on the initial + // page, once you're doing a client-side navigation to a URL at a different depth, the relative path would + // now point to the wrong location. Therefore we need to repair href mismatches. + if (attribute === 'src' || attribute === 'srcset') { if (!skip_warning) { check_src_in_dev_hydration(element, attribute, value); }