Routes: +page.svelte pages

A route maps an address in the browser to the code that shows a page. In SvelteKit routes are defined by folders: the path from src/routes to a +page.svelte file is the page's address. There is no separate file listing the routes.

From this chapter on we build a small blog in the same project: a list of posts, a post page, a form to add a post.

Folders and addresses

A new page

There is no special command: create the folder src/routes/blog and the file +page.svelte in it:

<!-- src/routes/blog/+page.svelte -->
<h1>Blog</h1>
<p>Posts will be here.</p>

Open http://localhost:5173/blog — the heading "Blog" appears. The dev server picks up new folders immediately, no restart needed.

Links

To move between pages, use a regular a tag:

<!-- src/routes/+page.svelte -->
<h1>Home</h1>
<a href="/blog">Read the blog</a>
<a href="/about">About</a>

Click "Read the blog" — the address changes to /blog. SvelteKit intercepts clicks on links to its own site and replaces only the content, without a full page reload. If you open the address directly, the page comes from the server already rendered — this is called server-side rendering (SSR).

Navigating from code

Sometimes you need to navigate not on a link click but after an action — for example, after saving. For this there is the goto function from the $app/navigation module:

<!-- src/routes/about/+page.svelte -->
<script>
  import { goto } from '$app/navigation';
</script>
 
<h1>About</h1>
<button onclick={() => goto('/blog')}>To the posts</button>

The button opens /blog just like a link. For regular navigation still prefer a: links work without JavaScript and are understood by search engines.

Special files

A route folder may hold other files starting with a plus: +layout.svelte, +page.js, +page.server.js, +server.js, +error.svelte. Each has its own lesson in this chapter. SvelteKit ignores regular files without the plus, so you can keep components used only by that page next to it.

Common mistake

Creating the file src/routes/blog.svelte and expecting a /blog page. SvelteKit does not build a route from a file name — you need a blog folder with +page.svelte inside. The address returns 404 until the structure is fixed.