Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpcutshall/svelte5-router/llms.txt

Use this file to discover all available pages before exploring further.

Installing svelte5-router takes a single command. This page walks you through adding the package with your preferred package manager, understanding the Svelte 5 peer dependency requirement, importing the components and utilities you need, and confirming that TypeScript is ready to go.

​
Install the Package

svelte5-router is published to npm and works with npm, pnpm, or yarn. Install it as a dev dependency alongside your existing Svelte 5 project: 
npm install -D svelte5-router
svelte5-router requires Svelte 5 (svelte ^5.0.0) as a peer dependency. It will not work with Svelte 3 or Svelte 4 projects. If you are still on an older Svelte version, consider migrating your project first using the Svelte 5 migration guide.

​
Peer Dependency

The library declares svelte ^5.0.0 as a peer dependency, meaning your project must already have Svelte 5 installed. This is almost always the case for any project scaffolded with Vite + @sveltejs/vite-plugin-svelte or SvelteKit targeting Svelte 5. If you ever see a peer dependency warning, ensure your package.json contains:
package.json
{
  "devDependencies": {
    "svelte": "^5.0.0"
  }
}

​
Importing from svelte5-router

All public exports are available from the single package entry point svelte5-router. You do not need to import from sub-paths: 
import {
  // Components
  Router,
  Route,
  Link,

  // Svelte actions
  link,
  links,

  // Context hooks (use inside Svelte components)
  useHistory,
  useLocation,
  useRouter,

  // Imperative utilities (usable anywhere)
  navigate,
  listen,

  // Lazy-loading helper
  dynamic,
} from "svelte5-router";
A quick summary of what each export does:
ExportTypeDescription
RouterComponentProvides routing context to all descendant Route and Link components. Must wrap your entire navigation tree.
RouteComponentRenders its component prop or child content when its path matches the current URL.
LinkComponentRenders an <a> element that navigates without a full page reload. Automatically sets aria-current="page" on the active link.
linkSvelte ActionApplied with use:link on a plain <a> tag to make it router-aware. Supports replace and preserveScroll attributes.
linksSvelte ActionApplied with use:links on a container element to make all descendant <a> tags router-aware. Individual anchors can opt out with the noroute attribute.
useHistoryHookReturns the history object from the nearest Router context. Call inside a Svelte component.
useLocationHookReturns a reactive store of the current Location object. Call inside a Svelte component.
useRouterHookReturns the full router context including activeRoute, base, and registration helpers.
navigateFunctionImperatively push or replace a history entry. Equivalent to clicking a Link.
listenFunctionRegister a callback that fires on every route change. For use outside Svelte components — returns an unsubscribe function.
dynamicFunctionWraps a dynamic import() expression so a route component is only fetched when its path matches.

​
TypeScript Setup

svelte5-router ships its own TypeScript declarations in dist/index.d.ts — no separate @types package is required. As long as your project has "compilerOptions": { "moduleResolution": "bundler" } (or "node16" / "nodenext") in tsconfig.json, imports are typed automatically. A minimal tsconfig.json that works well with Svelte 5 and svelte5-router:
tsconfig.json
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.svelte"]
}
If you are using SvelteKit, TypeScript configuration is handled automatically by the framework. You can start importing from svelte5-router straight away without any changes to tsconfig.json.

​
Verifying the Installation

Once installed, create a minimal smoke-test in your App.svelte to confirm everything resolves correctly:
App.svelte
<script lang="ts">
  import { Router, Route, Link } from "svelte5-router";
</script>

<Router>
  <Link to="/">Home</Link>
  <Route path="/"><p>Welcome home!</p></Route>
</Router>
If the page renders without import errors, svelte5-router is installed and ready. Head to the Quickstart guide to build a complete multi-route application.

Build docs developers (and LLMs) love

Get started for freeTalk to us