Params only running the first time I click

Question

The params of my categories are only running the first click.

I have this structure:

I have 2 categories: category/sell and category/rent

sell and rent are the params

When I click on a category it works.

But it only runs on the first click, so when I click on the other category svelte doesn't rerender.

My code [catName].svelte:

<script>
    import { page } from '$app/stores';
    const catName = $page.params.catName;
    // $: catName = $page.params.catName;
    $: listings = [];
</script>

Answer 1

After looking at the deleted code, the issue is that your data fetching routine (fetchListings) is not reactive and is not dependent on the category name. Hence, it will only run once in the lifetime of your page component.

Essentially, you will want to have a statement such as:

$: fetchListings(catName)

so that you run your data fetching routine whenever catName is updated.

I have put together a bare-bones example for you here (data is not fetched, merely read from hardcoded values for the sake of simplicity, but the concept remains the same).

Note: that's in addition to making catName itself reactive, obviously, as stated in the comments to your question:

$: catName = $page.params.catName