How to link relative to current page in svelte/sapper component?

Question

I've got a component in the sapper template with pagination. Currently all links are behaving as though they're relative to root (localhost:3000/ in this case) regardless of whether the href is in the form page or /page, (I even tried ./page.)

So for pagination where I just want to modify the query string I've got to pass the full path to the current view into the component for the href, which is a bit of a pain. Is there something I'm doing wrong that relative links aren't working? (Even better if there's a way to make them work calling goto() directly, I've got a "Goto page: [x]" input.) If not is there a recommended way to get the current path from inside a component so I can throw that in the pagination component?

Protoxylem

Answer 1

Currently, Sapper doesn't support relative links.

The best way to get current path would be to use window.location.href, which is only available once component is mounted.

This is a known issue ("Update to reflect current route?") that was moved to "In Discussion / RFC Proposal" on 4th May 2020:

"At present, is the same for all pages, which means you can't use relative URLs. This was introduced for good reasons, but it turns out to cause problems."

Trackman

Answer 2

a workaround actually is possible, if your page is for example is http://localhost:3000/product/foo normally in your foo.svelte file the link to local page should like this:

<a href="#anchor"> link to same page </a>

but in sapper you have to put the page full path:

    <a href="product/foo#anchor"> link to same page </a>

tested on: "sapper": "^0.28.10", "svelte": "^3.29.4"

Sirrah