SvelteKit by Example: Pages & Links

Page components are plan Svelte components that are rendered on a specific URL determined by the file system. In SvelteKit, pages are server side rendered by default.

In this example, we'll set up some static pages and link them.

To link to another page, use a vanilla a tag with an href attribute.

The file path determines the URL for the component.

src/routes/+page.svelte

<h1>Hello, word!</h1>

<a href="/about">About</a>

src/routes/about/+page.svelte

<h1>About</h1>

SvelteKit will preload the page the user wants to navigate to when they hover over a link, making the app experience faster.

To opt-out, set a data-sveltekit-preload-data attribute on the link. (Or on the body tag to disable it on all links.)

src/routes/+page.svelte

<h1>Hello, word!</h1>

<a
  href="/about"
  data-sveltekit-preload-data="off"
>
  About
</a>

resources://