Help needed for nested route scope (Tab functionality)

[HJordan35]

I am having some issues getting the "scope" of a nested route to update when the URL of the route changes when using the $url helper.

Pre-requisite:

• Downloaded the Starter

My current Pages structure is setup like this:

So the general idea I am going for, is that I have a set of "Categories" which each contain a set of "Types". When viewing /[category] route, the idea is that all of the types would be represented as tabs. When you click on a "Type" tab, you would then be presented with a number of entries for that combination of "Category" and "Type". You could then freely switch between tabs within the category to see all of the different entries.

Here is my _layout.svelte for [category]

<script>
  import { url, isActive } from "@roxi/routify";
  export let category;

  let categoryLinks = {
    beef: [
      ["./brisket", "Brisket"],
      ["./ribs", "Ribs"],
      ["./steaks", "Steaks"],
      ["./chuck", "Chuck"],
      ["./tenderloin", "Tenderloin"],
      ["./other", "Other"],
    ],
    chicken: [
      ["./smoked", "Smoked"],
      ["./grilled", "Grilled"],
      ["./wings", "Wings"],
      ["./other", "Other"],
    ],
    pork: [
      ["./shoulder", "Shoulder"],
      ["./ribs", "Ribs"],
      ["./tenderloin", "Tenderloin"],
      ["./chops", "Chops"],
      ["./bacon", "Bacon"],
      ["./other", "Other"],
    ],
  };
</script>

<nav>
  <ul>
    {#each categoryLinks[category] as [path, name]}
      <li class:text-ratingGold={$isActive(path)}>
        <a href={$url(`${path}`)}> {name} </a>
      </li>
    {/each}
  </ul>
</nav>
<slot scoped={{ category: category }} />

In npm run dev navigating to the /beef route generates the list of types as expected. And manually updating the URL also works as expected

Upon clicking one of the types, the URL updates, and I also get the expected display of my nested route.

Here is my _layout.svelte for the [category]/[type] route

<script>
  export let type;
</script>

<slot scoped={{ type: type }} />

And here is the index.js

<script>
  import { url } from "@roxi/routify";
  export let scoped;

  let category = scoped.category;
  $: category;
  let type = scoped.type;
  $: type;

  let links = [
    ["./my-entry1", "ENTRY 1"],
    ["./my-entry2", "ENTRY 2"],
  ];
</script>

<h1>This is {category} type for the page {type}</h1>
<ul>
  {#each links as [path, name]}
    <!-- Svelte magic. If isActive is true, the "active" class is applied. -->
    <li><a href={$url(`${path}`)}> {name} </a></li>
  {/each}
</ul>

The tabs remain on the page (as expected) and everything seems to be ok - However, if I click on a different type, the URL updates, but my "scope" does not update, and therefore, the type value in my index.js does not reflect the updated value. Only upon refresh of the browser to I see the updated type value I expect.

I hope this makes sense, and I am sure I am missing something very minor! Any help would be appreciated!

[HJordan35]

I just noticed I was missing $params capability which should be used for grabbing parameterized items from the URL. Updating my index.js to the following made the functionality work as expected!

<script>
  import { params } from "@roxi/routify";

  $: type = $params.type;
</script>

<slot scoped={{ type: type }} />