Prevent Navigation on select child elements about svelte-router HOT 10 CLOSED

@BennyHinrichs that would be too rigid, so rather, please see the latest version, 1.0.12, there is new Link component prop called "disabled' - https://github.com/spaceavocado/svelte-router#router-link-component

If set to true, the navigation actions is disabled on the link and the underlying element has set "disabled" css class.

from svelte-router.

Can you explain how that would be used here so that no navigation happens when you click "Don't Navigate":

<RouterLink to="/">
  <div>Navigate</div>
  <div class="no-navigation">Don't Navigate</div>
</RouterLink>

from svelte-router.

Now I see your point better.

This would just disable the whole element:

<RouterLink to="/" disabled={true}>
  <div>Navigate</div>
  <div class="no-navigation">Don't Navigate</div>
</RouterLink>

In your case, it would be better to create your own link component. The bare minimum is to just leverage $router.routeURL(to) to get the URL in the case of location object, and than call $router.push(to) based on your logic.

from svelte-router.

Sorry, I meant how can I make it so clicking "Navigate" follows the link, but clicking "Don't Navigate" does nothing? Won't your example make it so no navigation happens on both divs?

from svelte-router.

Updated the comment above.

from svelte-router.

Or you can wrap the link into your own DOM structure, e.g.:

<div class="link">
   <RouterLink to="/" disabled={true}>Navigate</RouterLink>
   <div class="no-navigation">Don't Navigate</div>
</div>

from svelte-router.

I might look into making my own component. Consider the following case where you have an interactive element in the middle of the click area:

<RouterLink to="/route">
  <div>Click to Navigate!</div>

  <label class="no-navigation">
    <input type="checkbox">
    Click Without Navigating!
  </label>

  <div>Click to Navigate!</div>
</RouterLink>

Okay, after some thought, what about adding a disabledClass property to router link component? Then navigate(event) in link.svelte would be expanded with

if (disabledClass && event.target.closest('.' + disabledClass) {
  return;
}

from svelte-router.

I see what you want to achieve but it is too specific to be considered as general usage - there might be plenty of cases like that, so the custom component seems to be the suitable, project specific approach here.

Quick tip, you prevent the event triggering like so:

<script>
  import Link from './Link.svelte';
  function noop() {}
</script>

<Link>
  <div>Click to Navigate!</div>
  <label class="no-navigation" on:click|preventDefault|stopPropagation={noop}>
    Click Without Navigating!
  </label>
</Link>

Link.svelte:

<script>
  function click() {
    console.log('click');
  }
</script>

<a href="/" on:click|preventDefault={click}>
  <slot></slot>
</a>

from svelte-router.

Wow, I'm dumb. I totally forgot that stopPropagation exists 😄 That actually solves the whole problem still using RouterLink. Thanks for indulging me.

from svelte-router.

@BennyHinrichs no worries, glad to help.

from svelte-router.