Pre-conditions (route guards) to handle close modal

Hello, svelte-spa-router is really fine and works as expected. Thank you.

But I need to handle the browser history back to close a modal. So i have read the doc at https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/Advanced Usage.md#route-pre-conditions

I have a store variable which tells me if I accept to route or not.

If not, I expected “svelte-spa-router” to do nothing. Sure it does not load any route but it seems to unload the current component.

With Vue I dit it like this :

router.beforeEach((to, from, next) => {
  if (store.state.isOpenModal) {
    store.state.isOpenModal = false // close modal
    next(false) // cancel routing
    return
  }
  next() // accept routing
})

This works perfectly even if I don’t understand how they prevent onpopstate(). I transposed like this in Svelte :

const routes = {
  '/': wrap(
    Home,
    () => { return nextOrNot() }
  ),
  '/about': wrap(
    About,
    () => { return nextOrNot() }
  )
}

function nextOrNot () {
  if (isOpenModal) {
    iisOpenModal.set(false)
    return false
  }
  return true
}

My modal is closed but my current component is gone.

[ItalyPaleAle]

I’ll take a look at this and see what can be done

[ItalyPaleAle]

I’m not sure how I would do that, I’d have to experiment.

One lead (which might or might not work) could be using a route guard to block the new component from mounting if the form is dirty, and inside the route guard invoke push() to send the user back to the page they were on before. This would likely still cause the component to be un-mounted, so you’d have to restore the state of the form manually.