Skip to content

fix(svelte): keep useParams() current when navigating within the same page - #610

Merged
Brooooooklyn merged 1 commit into
fix/auth-token-picked-platformfrom
fix/svelte-use-params-refresh
Oct 27, 2026
Merged

Brooooooklyn merged 1 commit into
fix/auth-token-picked-platformfrom
fix/svelte-use-params-refresh

Conversation

@Brooooooklyn

Copy link
Copy Markdown
Member

Problem

In Svelte pages, useParams() goes stale when you navigate between two URLs that use the same page component. On /posts/[slug], clicking a <Link> from /posts/a to /posts/b updates the page props, but const params = useParams(); params.slug still reads "a".

App.svelte replaced the params object on every navigation. useParams() reads the context only once, when the component is set up, so the page and its layouts kept the old object.

before:  navigate -> params = { slug: 'b' }        (new object)
         page still holds old object -> slug 'a'

after:   navigate -> clear keys, assign { slug: 'b' } (same object)
         page holds same object       -> slug 'b'

What changed

  • packages/svelte/src/runtime/App.svelte: params are now updated in place, the same way shared data already was. The old replaceShared helper is now replaceInPlace(target, next) and is used for both.

Tests

  • New packages/svelte/test/integration/use-params-navigation.test.ts: mounts the real App.svelte in Chromium with a page that calls useParams(), updates the stores the way the Svelte pages client does on a Link navigation, and checks that the rendered slug changes from a to b. It fails without the fix.
  • The existing Svelte pages client tests (including the shared-data replacement test) still pass.

To check

  • useParams() now always returns the same object for the life of the app, as useShared() already does.

🤖 Generated with Claude Code

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-27T07:56:11.238179Z 2d81b43 New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@Brooooooklyn

Copy link
Copy Markdown
Member Author

@codex review

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://fix-svelte-use-params-refresh-void-cloud.voidzero-docs.workers.dev (commit 2d81b43)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status Deployment URL Commit Updated (UTC) See this deployment's details
  • Build: Success ✅
  • Deployment: Success ✅

View logs ↗
https://91a4dc05-void-cloud.voidzero-docs.workers.dev 2d81b43 2026-10-27T07:55:08.574Z Visit the dashboard ↗
  • Build: Success ✅
  • Deployment: Success ✅

View logs ↗
https://50ada90c-void-cloud.voidzero-docs.workers.dev 7748d0d 2026-10-27T07:20:40.787Z Visit the dashboard ↗

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Delightful!

Reviewed commit: 7748d0d3e3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

… page

On a dynamic route such as /posts/[slug], a Link from /posts/a to
/posts/b reuses the same page component. App.svelte swapped in a new
params object on each navigation, but useParams() had already handed
the old one to the page and its layouts, so `params.slug` kept showing
"a" while the page props moved to "b".

Update the params object in place, the same way shared data is
updated, so the object returned by useParams() stays reactive and
current.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Brooooooklyn
Brooooooklyn force-pushed the fix/svelte-use-params-refresh branch from 7748d0d to 2d81b43 Compare October 27, 2026 07:54
@Brooooooklyn
Brooooooklyn changed the base branch from main to fix/auth-token-picked-platform October 27, 2026 07:55
@Brooooooklyn
Brooooooklyn added this pull request to stack #618 October 27, 2026 07:56
@Brooooooklyn
Brooooooklyn enabled stacked auto-merge (squash) October 27, 2026 08:34
stacked auto-merge was automatically disabled October 27, 2026 08:34

Auto-merge was disabled for another pull request in the stack

@Brooooooklyn
Brooooooklyn merged commit ec73742 into main Oct 27, 2026
27 of 29 checks passed
@Brooooooklyn
Brooooooklyn deleted the fix/svelte-use-params-refresh branch October 27, 2026 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants