Routing and navigation: folders are URLs¶

Exercise routing-navigation-annex.pdf · PDF

Try to send a friend a link to your "Maths homework" note. You cannot. NoteBox has one address, localhost:5173, whatever is on screen. Now open a note and press the browser's Back button. There is nothing to go back to.

On the web, the address bar is part of the interface. A screen without an address cannot be linked, bookmarked or returned to. If the user can see it, the user should be able to point at it. In Figma you drew arrows between frames. Here, each frame gets an address and the arrows become links.

Streets and numbers¶

A URL is a postal address. /about is a street with one house. /notes/2 is house number 2 in Notes Street: one street, many houses, and one architect's plan for all of them. Nobody draws a new plan for every house.

File-based routing means every folder inside src/routes is a URL, and the +page.svelte inside it is what that URL shows.

flowchart LR
    L["<b>+layout.svelte</b><br>header + navigation"] --> H["<b>/</b><br>+page.svelte"]
    L --> A["<b>/about</b><br>about/+page.svelte"]
    L --> N["<b>/new</b><br>new/+page.svelte"]
    L --> D["<b>/notes/2</b><br>notes/[id]/+page.svelte<br>one plan, many houses"]

There is nothing to register. The folder is the registration. The folder is called about, and the file inside is always +page.svelte, never about.svelte.

A page in thirty seconds¶

Create the folder src/routes/about/ and this file inside it:

<svelte:head>
    <title>About · NoteBox</title>
</svelte:head>

<h1>About NoteBox</h1>
<p>A small notes app built in class with Svelte 5 and SvelteKit.</p>

Type localhost:5173/about in the address bar. It exists. <svelte:head> puts things in the page's <head>: here, the title on the browser tab.

The layout: what every page shares¶

The bar you built in Layout with CSS has to appear on every page, so it moves out of +page.svelte and gains a navigation.

A layout is a frame around every page in its folder and below. {@render children()} marks where the page goes.

<script>
    import '../app.css';
    import favicon from '#lib/assets/favicon.svg';
    import { page } from '$app/state';

    let { children } = $props();

    const links = [
        { href: '/', label: 'Notes' },
        { href: '/new', label: 'New note' },
        { href: '/about', label: 'About' }
    ];
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
</svelte:head>

<header class="bar">
    <a class="brand" href="/">NoteBox</a>
    <nav aria-label="Main">
        {#each links as link (link.href)}
            <a href={link.href} aria-current={page.url.pathname === link.href ? 'page' : undefined}>
                {link.label}
            </a>
        {/each}
    </nav>
</header>

<main>
    {@render children()}
</main>

<style>
    .bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        padding: 0 16px;
        border-bottom: 1px solid var(--nb-line);
    }

    .brand {
        font-size: 20px;
        font-weight: 700;
        color: var(--nb-ink);
        text-decoration: none;
    }

    nav { display: flex; gap: 16px; }
    nav a { color: var(--nb-link); text-decoration: none; }

    nav a[aria-current='page'] {
        font-weight: 700;
        color: var(--nb-ink);
        text-decoration: underline;
    }

    main { max-width: 1200px; margin: 0 auto; padding: 16px; }
</style>

Three things are happening here:

• Navigation is a plain <a href>. There is no special component. Click About with the Network tab open: the page does not reload. SvelteKit intercepts the click and swaps only the page. This is client-side navigation. The Back button still works, and the layout stays, which is why the header does not flicker.
• page (from $app/state) is reactive information about where you are. page.url.pathname is the path.
• aria-current="page" tells assistive technology which link is the current one, and the CSS styles from that same attribute. One source of truth, the same trick as aria-invalid in Forms and validation.

State that several pages need¶

The form goes to /new, and the list stays at /. But the notes live in a variable inside the list page. How does the form page add one? It cannot reach it. State that several pages need must live outside the pages.

A file ending in .svelte.js is a JavaScript module where runes work. It is loaded once and shared by every page that imports it.

Move the seed, the localStorage lines and addNote out of the page and into a module:

const seed = [
    // the four notes, each with id, title, body, tag, pinned
];

const saved = localStorage.getItem('notebox');

export const notes = $state(saved ? JSON.parse(saved) : seed);

function save() {
    localStorage.setItem('notebox', JSON.stringify(notes));
}

export function addNote(data) {
    notes.push({ id: String(Date.now()), ...data });
    save();
}

export function removeNote(id) {
    const index = notes.findIndex((note) => note.id === id);
    if (index === -1) return;
    notes.splice(index, 1);
    save();
}

Two things differ from the page version:

• notes is exported as const. You change its contents and never reassign it.
• Saving is a plain function call. An $effect needs a component to live in, and a module has none.

The list page's script shrinks to this. In its markup, remove the <aside> with the form and the .layout wrapper, and add back <h1>Notes</h1>:

<script>
    import { notes } from '#lib/notes.svelte.js';

    let query = $state('');

    let visible = $derived(
        notes.filter((note) => note.title.toLowerCase().includes(query.toLowerCase()))
    );
</script>

And the form gets its own page:

<script>
    import { goto } from '$app/navigation';
    import NoteForm from '#lib/NoteForm.svelte';
    import { addNote } from '#lib/notes.svelte.js';

    function save(data) {
        addNote(data);
        goto('/');
    }
</script>

<svelte:head>
    <title>New note · NoteBox</title>
</svelte:head>

<div class="narrow">
    <h1>New note</h1>
    <NoteForm onsave={save} />
</div>

<style>
    .narrow { max-width: 358px; }
</style>

goto('/') navigates from code: after a valid save, back to the list, where the new card is waiting. NoteForm did not change by one character. It still just calls onsave.

If notes lose their body after this move, an old localStorage value is hiding the new seed. Delete the key notebox once in DevTools.

One plan for every house¶

First, make each card a link. The <li> loses the class, and an <a> takes the card's styles, plus color: var(--nb-ink); text-decoration: none;. The card's CSS already targets .card, but the heading inside is now an <h2>, so change .card h3 to .card h2 too:

<li>
    <a class="card" href="/notes/{note.id}">
        <h2>{note.title}</h2>
        <p>{note.body}</p>
        <span class="tag">{note.tag}</span>
    </a>
</li>

Click one: 404 Not Found. The address exists in the link, but no file answers it yet.

A dynamic route is a folder whose name is a parameter, written in square brackets. It answers many URLs with one file.

Create the folder src/routes/notes/[id]/, brackets included:

<script>
    import { goto } from '$app/navigation';
    import { page } from '$app/state';
    import { notes, removeNote } from '#lib/notes.svelte.js';

    let note = $derived(notes.find((item) => item.id === page.params.id));

    function remove() {
        removeNote(page.params.id);
        goto('/');
    }
</script>

<svelte:head>
    <title>{note ? note.title : 'Not found'} · NoteBox</title>
</svelte:head>

<p><a href="/">&lt; Notes</a></p>

{#if note}
    <article>
        <h1>{note.title}</h1>
        <p class="tag">{note.tag}{note.pinned ? ' · pinned' : ''}</p>
        <p>{note.body}</p>
        <button onclick={remove}>Delete</button>
    </article>
{:else}
    <h1>Note not found</h1>
    <p>There is no note with the id "{page.params.id}".</p>
{/if}

Whatever is in the URL where the folder says [id] arrives in page.params.id. It is always a string, and '2' === 2 is false. That is why NoteBox's ids have been strings from the start.

Now look at the wrong address. Type /notes/999: same file, the {:else} branch. Who can type a URL by hand? Anybody. So a dynamic route must always decide what to show when the parameter matches nothing.

Finally, the test from the start of this page. Copy the URL of a note and paste it in a new tab. It opens that note.

Link or goto()?¶

A button with goto() may look like a link, but it is not the same.

And keep the leading slash in every link. href="../notes/3" is relative to the current folder, so it breaks one level down. Write href="/notes/3".

The special files¶

At the end, the tree looks like this:

src/
├ app.css
├ lib/
│ ├ NoteForm.svelte
│ └ notes.svelte.js
└ routes/
  ├ +layout.js              export const ssr = false;
  ├ +layout.svelte          header + navigation
  ├ +page.svelte            /
  ├ about/+page.svelte      /about
  ├ new/+page.svelte        /new
  └ notes/[id]/+page.svelte /notes/1, /notes/2, ...

Your turn: /tags/[tag]¶

The exercise in the handout adds one more dynamic route, src/routes/tags/[tag]/+page.svelte:

• /tags/school shows the heading "Tag: school" and lists the notes with that tag. Each title links to /notes/{id}.
• A line such as "2 notes" is derived.
• A tag nobody uses shows "No notes with this tag."
• On the note page, the tag becomes a link to /tags/{tag}, except for none.

If something fails, check these first:

Then do it in your own app. Draw a route map (URL, file, screen) with at least four routes, one of them dynamic. Add a navigation that marks the current page, and a decent screen for a parameter that matches nothing. The pages can be nearly empty for now.

Key takeaways¶

• File-based routing: a folder inside src/routes is a URL, and its +page.svelte is what the URL shows. There is nothing to register.
• A layout wraps every page below it, and {@render children()} marks where the page goes.
• Links are plain <a href>. SvelteKit turns them into client-side navigation with no reload.
• A dynamic route like notes/[id] is one plan for many houses. Read the parameter with page.params.id: always a string.
• Use a link to go somewhere, and goto() for navigation that follows an action.
• State that several pages need lives in a .svelte.js module, and a dynamic route must always handle a parameter that matches nothing.

Quick check¶

Every note has an address now, but open NoteBox in two browsers and you get two different sets of notes. Next, the notes move to a server: Consuming data.