SvelteKit

Routing

This page explains how Routing is handled in a SvelteKit project.

This section builds upon the SvelteKit Quick Start and introduces Routing configuration.

Project Structure

myapp
src
routes
[locale]
+page.svelte
U
lib
i18n
intor-config.ts
M

Integration Steps

♯1 Create a Dynamic Route

Create a dynamic route directory [locale] under routes/, and add a +page.svelte file inside it.

The content of +page.svelte can be reused directly from the Usage Example in the previous section, and is not repeated here.

[locale]
+page.svelte
U

♯2 Enable Routing Configuration

Enable Routing behavior in the configuration file.

See: Config/Routing

intor-config.ts
M

src/lib/i18n/intor-config.ts
import { defineIntorConfig } from "intor/config";

export const intorConfig = defineIntorConfig({
  // ...
  routing: { localePrefix: "all" },
});

Once configured, incoming requests will be routed according to the defined Routing rules and resolved to the appropriate locale paths.

♯3 Using Navigation Tools

The following tools describe and execute locale-aware navigation behavior.
For their composition rules, see: Navigation Intent

useNavigation

Wraps SvelteKit’s navigation capabilities and adds locale-aware routing logic.

Provides two helpers:

• goto: Performs navigation and may switch locale.
• href: Resolves a locale-aware destination path without side effects.

const { goto, href } = useNavigation();

goto("/", { locale: "en" })

<a href={href("/about")}>About</a>