Navigating to other path params from path parameter route does not update page

[ritchieanesco]

Description Using path parameters for routes, when I navigate to other pages that also use parameters the page does not update. See below.

version: 0.4.6

Routes component:

<script lang="ts">
  import { Route } from "tinro"
</script>

<Route path="/root/:id">
  <Page />
</Route>

Page component:

<script lang="ts">
  import { router } from "tinro"
  let params: Record<string, string>
  $: params = router.params()
</script>

<div data-test-id="api-response-page">
  {#if params.id === 'assets'}
    You are on the assets page
  {:else if params.id === 'goals'}
    You are on the goals page
  {/if}
  <p>
     // clicking on the following anchors does not update the page.
    <a href="/root/assets">assets</a> 
    <a href="/root/goals">goals</a>
  </p>
</div>

[AlexxNB]

In Svelte $: params = router.params() is not reactive, because there no any depends inside an expression. You may do something like $: params = router.params($router.path) and expression will update on every path update.

But since v.0.5.0 router.params() is DEPRECATED, use router.meta() instead. And the code will be even simpler:

<script lang="ts">
  import { router } from "tinro" 
  const meta = router.meta();
</script>

<div data-test-id="api-response-page">
  {#if $meta.params.id === 'assets'}
    You are on the assets page
  {:else if $meta.params.id === 'goals'}
    You are on the goals page
  {/if}
  <p>
    <a href="/root/assets">assets</a> 
    <a href="/root/goals">goals</a>
  </p>
</div>

[ritchieanesco]

That worked! Thanks @AlexxNB. Will have to do the version bump in another commit as I might need to do another patch as per issue #36 . Are you able to provide any insight as to how I might be able to address that issue?