How to change route on button click in Sapper?

Question

I know it's possible to go to a route using

<a href="/example"></a>

but was wondering if it was possible with a button component alone and not by wrapping an <a> tag around the button.

what I am looking for is something similar to this:

<button goto={"/example"}>Goto a page</button>

Follow this answer asked on stack over flow https://stackoverflow.com/questions/61888502/how-can-i-navigate-to-different-path-on-click-in-svelte — Shoaib, Nov 07 '20 at 20:42
Use [goto](https://sapper.svelte.dev/docs#goto_href_options) — JHeth, Nov 07 '20 at 22:47

score 3 · Accepted Answer · answered Nov 08 '20 at 15:59

You can use goto for this...

<script>
  import { goto } from '@sapper/app';
</script>

<button on:click={() => goto('/example')}>Goto a page</button>

...but you probably shouldn't. Links are links, buttons are buttons. If something causes navigation, you're much better off using an <a> — using a button is bad for accessibility, bad for SEO, and bad for usability (no middle-click to open in new tab, etc). It's bad all around unless you really know what you're doing!

Thank for the `but`, I had to rethink my component and rewrote the component — rotimi-best, May 08 '21 at 18:37

How to change route on button click in Sapper?

1 Answers1