Example of how to add an active class

[lukx33]

  <nav>
    <a use:route href="/">start</a>
    <a use:route href="/test" >test</a>
    <a use:route href="/test2" >test 2</a>
  </nav>

Is there any easy way to add class="active" for the current address/router?

[lukx33]

Something like this would be awesome.

To type Route I added label, path2 and isCurrent.
This allows me to use the routes array to create menu.
At the same time, I can immediately use isCurrent to mark which position is current/active.

path could be called pathToMatch.
path2 could be called pathToOpen.

Of course, the logic I wrote in my pre function would need to be moved to the Instance code.

<script lang="ts">
  import "./app.css";
  import { route, Router, type Route } from "@mateothegreat/svelte5-router";

  import Home from "./routes/Home.svelte";
  import Test from "./routes/Test.svelte";

  const routes: Route[] = $state([
    {
      label: "start",
      path2: "/",
      path: "^/$",
      component: Home,
      isCurrent: false,
    },
    {
      label: "test",
      path2: "/test",
      path: "/test",
      component: Test,
      isCurrent: false,
    },
  ]);

  async function pre(route: Route): Promise<Route> {
    for (const r of routes) {
      if (r.path == route.path) {
        r.isCurrent = true;
      } else {
        r.isCurrent = false;
      }
    }

    return route;
  }
</script>

<main>
  <nav>
    {#each routes as r}
      <a use:route href={r.path2} class={r.isCurrent ? "active" : ""}> {r.label}</a>
    {/each}
  </nav>

  <Router {pre} {routes} />
</main>