Page doesn't re-render when URL parameter changes

How to reproduce:

• configure a route with a parameter, e.g. item/:itemId
• navigate to a valid route, e.g. item/7
• change the itemId parameter value, e.g. item/8, in the browser address bar and hit enter

Expected result:

• browser should fire a hashchange event
• router should replace the page content for item 7 with the content of item 8

Actual result:

• browser fires a hashchange event ✔️
• router doesn’t replace the page content (still showing item 7) ❌

[crazedVic]

Thanks for pointing me in the right direction. Took me a while still to get it working but I got there. For others that end up here, who maybe are as new at svelte as I am, this is what i did to get it working:

import { location } from 'svelte-spa-router';

then in the script i put this line:

$: getBookings($location);

this is the fetch function:

const getBookings = async (location = null) => {
        status = location.split('/')[2];
        fetch(url + 'shifts/' + status, options)
                .then(res => {
                    if (res.ok) {
                        res.json().then(json => {
                            bookings = json.data;
                        });
                    }
                    else{
                        statusText = "Error loading bookings"
                    }
                })
                .then(res => console.log(res));
    }

the format of the url for my app is:

/Bookings/{{status}}

[duduindo]

@crazedVic Thank you!

Easy example:

<script>
  import { querystring } from 'svelte-spa-router'

  $: load($querystring)

  function load(value) {
    console.log("Re-call", value)   
  }
</script>