How to replace the URL but not trigger the backend load function?

[NeroBlackstone]

I tried history.replaceState() and sveltekit replacestate, but load function still reload.

It's annoy.

My use case is: A ChatGPT like front-end web page:

• /chat: here is new chat start
• /chat/[chatId]: this is history chat

When start a new chat at /chat, when LLM start respond, replace url to generated chatID.

But if I use replaceState(), it trigger reload function and refresh my page.

It's annoy, I just want to replace URL but do nothing...

[brunnerh]

replaceState() should not reload the page or call any load functions.
Please provide a minimal reproduction; maybe something else is causing the problem.

[NeroBlackstone]

Yes, I know the reason now, I put replaceState() in <form>, like this:

/chat/[chatId]/+page.svelte

  <form onsubmit={()=>{    
    replaceState(`/chat/${chat.id}`,{})
  }}>
    <button type="submit">Send</button>
  </form>

This is the problem. When the form is submitted, replaceState updates the URL first, and then the form submission causes the entire page to refresh. The URL has changed at this time, this actually causes the loading function to re-run.

This is a trap...

[NeroBlackstone]

So indeed.. this has nothing to do with sveltekit, replaceState should not be placed in the onsubmit callback of the form

[brunnerh]

You can place the code there, but if the form should do something other than a normal submission, you have to prevent the default behavior.

<form onsubmit={e => {
    e.preventDefault();
    replaceState(`/chat/${chat.id}`,{});
}}>