CODEWITHSUNDEEP
sveltekit
Kasper Kamperman
Kasper Kamperman

Reputation: 111

How to navigate to child routes within a dynamic (slug) route in SvelteKit

I have the following route structure

src/routes/[slug]/results
src/routes/[slug]/about

I can't figure out how to link to the routes in SvelteKit. The routes themselves work when I access them through the browser navigation bar.

How can I create a simple links on the [slug] page, that will link to the child routes?

Both below link to the root:

<a href="results">results</a>
<a href="/results">results</a>

Tried something like below, but that didn't work.

<a href="/:slug/results">results</a> 
<a href="/[slug]/results">results</a>

I assume it's something similar, but the SvelteKit documentation on routing and advanced routing don't mention anything related to navigation within dynamic routes.

Upvotes: 0

Views: 736

Answers (2)

Kasper Kamperman
Kasper Kamperman

Reputation: 111

I figured it out, it was a bit hidden in the documents (and I'm a starter, so not fully aware of all the concepts yet).

In +page.js:

/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  return {
        slug: params.slug
  };
}

In +page.svelte:

<script>
    export let data;
</script>
<a href="/{data.slug}/result">results</a>
<a href="/{data.slug}/share">share</a>

Upvotes: 0

brunnerh
brunnerh

Reputation: 184376

Would just add the parameter to the link:

<script>
    import { page } from '$app/stores';
</script>

<a href="/{$page.params.slug}/results">Results</a>

Upvotes: 3

Related Questions