Svelte - pass use:action to component child

Question

I'm new to Svelte and it is very likely I'm missing something here.

I'm using sveltestrap and svelte-spa-router. When I try creating a <Button> (from sveltestrap) and using the link action (from svelte-spa-router) like this:

<script>
  import { Button } from 'sveltestrap';
  import {link} from 'svelte-spa-router';
  let myLink = '/foo/bar';
 </script>
<Button use:link={myLink}>
  Click here
</Button>

I get the following error:

[!] (plugin svelte) ValidationError: Actions can only be applied to DOM elements, not components

My expectation was that somehow (??) the <Button> would 'pass down' the use:link to the child html node.

Is there a best practice for this type of situation?

Answer 1

Since you're using a button component, you might want to change your code to use push rather than link in the on:click event.

<script>
  import { Button } from 'sveltestrap';
  import { push } from 'svelte-spa-router';
  let myLink = '/foo/bar';
</script>

<Button on:click={() => push(myLink)}>
  Click here
</Button>