Reloading a route with different params about svelte-spa-router HOT 9 CLOSED

Guys, an easy way to achieve that is using the following code on the svelte page that need to be rerendered:

$: if (params.id) { //watch the params.id for changes
getData(); //invoke your method to reload data
}

from svelte-spa-router.

Could it be as simple as a refresh attribute on the route ?

const routes = {
    '/': HomePage,
    '/topic/:id': { component: Topic, refresh: true }
}

But that may imply that you set the component as null, render the view so Sveltes deletes the tag, then re-render with the actual component so it is initialized again. Maybe don't do that just for me, I rewrote with reactive assignments and I'm fine.

By the way, the reactive block cannot work because ps = client.asSvelteStore is a store, so if I use $ps later in the initialization code, I have an error because Svelte tries to initialize $ps but at init time, ps is undefined. But that is an edge case, I could make sure the store exists upon initialization.

from svelte-spa-router.

I made a quick repl with the issue and the workaround here: https://svelte.dev/repl/11e51e1ce65449c0b0db1af0906e206a?version=3.4.4

I think in the workaround method, you don't need to attach mount to onMount, because the reactive statement will work when params first gets its value, so it will run when the component is first mounted anyway.

The workaround (which is exactly what I figured out yesterday and works for my immediate purposes) also has the possible downside that you might want the route to run mount again even if you are just going back to the exact same route, thus not changing params. Maybe you want some random behavior, or maybe you want to update to get new information from the server. But since mount won't run unless the value of params changes, you won't see the update. (Evident in the repl example)

from svelte-spa-router.

So I think I understand why this behavior and while it wasn’t something done intentionally, it does make sense, as Svelte tries to change the DOM as little as possible.

I’ll look more into this later today or tomorrow.

In the meanwhile, maybe there’s a workaround for you?

• create a function named “mount”
• bind “mount” to onMount
• also add a reactive statement so every time that params change, you manually fire the “mount” function.

Would that work? Also, any chance you could create a REPL and share that?

from svelte-spa-router.

Thanks for writing the REPL, and yes I agree the solution you wrote is the optimal one.

Regarding this:

you might want the route to run mount again even if you are just going back to the exact same route

This is actually by design. If the navigation goes to a page with the same hash, browsers won't trigger the "hashchange" event, and so nothing happens. I actually like this behavior, as I find it makes sense for a SPA.

A workaround in your case could be to add an action to the link that changes something else in the state when clicked. You can then use that to trigger a new refresh of the view.

from svelte-spa-router.

Hello,

I have the same problem. The param in my route is not updated when I change the URL if I do this:

export let params
let { myParam } = params

So all the code depending on the URL params must be in reactive $: statements. That results in code that is hard to understand.

A force-reload component option could be very useful !

For example, I have to do this:

  $: party_id = params.party_id
  $: client = partyConnect(party_id)
  $: ps = client.asSvelteStore()

And then, any code that is depending on those things as well.

But in the end this is more related to a design problem in svelte than in this nice router I guess.

from svelte-spa-router.

I understand.

Reactive statements aren't necessarily "bad", however, as they're the core of Svelte. You could simplify them slightly by putting them into a reactive block like:

$: {
    party_id = params.party_id
    client = partyConnect(party_id)
    ps = client.asSvelteStore()
}

from svelte-spa-router.

I can look into a "force reload" option however. How would that need to look like to be helpful to you?

from svelte-spa-router.

Thanks guys, this is not my first issue with svelte component remounting, and such solutions look not idiomatic really. Perhaps router should deal with this issue, not routable component.

from svelte-spa-router.