# sv-router > Type-safe routing for Svelte SPAs Flexible, ergonomic, and complete Svelte 5 router ## Table of Contents ### Introduction - [Why sv-router?](/guide/why.md): Why choose sv-router: type-safe navigation, nested routes, hooks, preloading, and reactive search params, built for Svelte 5 SPAs. - [Getting Started](/guide/getting-started.md): Install sv-router in a new or existing Svelte 5 project and choose between code-based and file-based routing. ### Approaches - [Route Definition (Code-based)](/guide/code-based/route-definition.md): Define code-based routes with createRouter using flat mode, tree mode, or both combined in the same configuration. - [Route Definition (File-based)](/guide/file-based/route-definition.md): Define file-based routes by placing .svelte files in the routes directory, using flat or tree organization. ### Introduction - [Why sv-router?](/guide/why.md): Why choose sv-router: type-safe navigation, nested routes, hooks, preloading, and reactive search params, built for Svelte 5 SPAs. - [Getting Started](/guide/getting-started.md): Install sv-router in a new or existing Svelte 5 project and choose between code-based and file-based routing. ### Setup - [Manual Setup (Code-based)](/guide/code-based/manual-setup.md): Manually set up code-based routing in a Svelte project — define routes with createRouter and render them with the Router component. ### Essentials - [Route Definition (Code-based)](/guide/code-based/route-definition.md): Define code-based routes with createRouter using flat mode, tree mode, or both combined in the same configuration. - [Dynamic Routes (Code-based)](/guide/code-based/dynamic-routes.md): Create dynamic code-based routes with colon-prefixed segments and access their parameters through route.params and route.getParams. - [Catch-All Routes (Code-based)](/guide/code-based/catch-all-routes.md): Handle unmatched URLs in code-based routing with the `*` symbol, optionally named to expose the unmatched segment. - [Layouts (Code-based)](/guide/code-based/layouts.md): Wrap code-based routes with shared layout components, and selectively opt out of a parent layout using parentheses syntax. - [Navigation (Code-based)](/guide/code-based/navigation.md): Navigate between code-based routes with links, the p() helper, the navigate() function, and block navigation to prevent lost changes. - [Search Params (Code-based)](/guide/code-based/search-params.md): Read and update URL search parameters reactively with the searchParams object, which automatically syncs with the browser URL. - [Active Route (Code-based)](/guide/code-based/active-route.md): Highlight active links with the isActiveLink attachment or check whether a code-based route is active programmatically with isActive. ### Advanced - [Hooks (Code-based)](/guide/code-based/hooks.md): Attach beforeLoad, afterLoad, onPreload, and onError hooks to code-based routes for guards, data loading, and error handling. - [Basename (Code-based)](/guide/code-based/basename.md): Configure a basename to deploy your app under a subpath, or switch to hash-based routing for file:// URLs. - [Code Splitting (Code-based)](/guide/code-based/code-splitting.md): Reduce initial bundle size by lazy-loading code-based routes with dynamic import() calls. - [Preloading (Code-based)](/guide/code-based/preloading.md): Preload lazy code-based routes on hover, viewport entry, or pointer prediction, or programmatically via preload(). - [Route Metadata (Code-based)](/guide/code-based/route-metadata.md): Attach arbitrary metadata to code-based routes for authentication guards, UI configuration, or analytics tracking. - [Scroll Behavior (Code-based)](/guide/code-based/scroll-behavior.md): Control scroll-to-top behavior on navigation and customize scroll restoration across history changes. - [View Transitions (Code-based)](/guide/code-based/view-transitions.md): Enable the View Transitions API during code-based navigation and customize animation effects with CSS. ### Introduction - [Why sv-router?](/guide/why.md): Why choose sv-router: type-safe navigation, nested routes, hooks, preloading, and reactive search params, built for Svelte 5 SPAs. - [Getting Started](/guide/getting-started.md): Install sv-router in a new or existing Svelte 5 project and choose between code-based and file-based routing. ### Setup - [Manual Setup (File-based)](/guide/file-based/manual-setup.md): Set up file-based routing with the sv-router Vite plugin or CLI, including TypeScript configuration and generated routes. - [Configuration (File-based)](/guide/file-based/configuration.md): Configure the sv-router Vite plugin and CLI with options like allLazy, base, ignore, js, and path. ### Essentials - [Route Definition (File-based)](/guide/file-based/route-definition.md): Define file-based routes by placing .svelte files in the routes directory, using flat or tree organization. - [Dynamic Routes (File-based)](/guide/file-based/dynamic-routes.md): Create dynamic file-based routes with [param] filename syntax and access their parameters through route.params and route.getParams. - [Catch-All Routes (File-based)](/guide/file-based/catch-all-routes.md): Handle unmatched URLs in file-based routing with the [...param] spread filename syntax. - [Layouts (File-based)](/guide/file-based/layouts.md): Wrap file-based routes with shared layout.svelte components, and opt out of parent layouts using parentheses syntax. - [Navigation (File-based)](/guide/file-based/navigation.md): Navigate between file-based routes with links, the p() helper, the navigate() function, and block navigation to prevent lost changes. - [Search Params (File-based)](/guide/file-based/search-params.md): Read and update URL search parameters reactively with the searchParams object, which automatically syncs with the browser URL. - [Active Route (File-based)](/guide/file-based/active-route.md): Highlight active links with the isActiveLink attachment or check whether a file-based route is active programmatically with isActive. ### Advanced - [Hooks (File-based)](/guide/file-based/hooks.md): Attach beforeLoad, afterLoad, onPreload, and onError hooks to file-based routes by creating a hooks.ts file. - [Basename (File-based)](/guide/file-based/basename.md): Configure a basename to deploy your app under a subpath, or switch to hash-based routing for file:// URLs. - [Code Splitting (File-based)](/guide/file-based/code-splitting.md): Reduce initial bundle size by suffixing route files with .lazy.svelte, or enable lazy loading globally with the allLazy option. - [Preloading (File-based)](/guide/file-based/preloading.md): Preload lazy file-based routes on hover, viewport entry, or pointer prediction, or programmatically via preload(). - [Route Metadata (File-based)](/guide/file-based/route-metadata.md): Attach arbitrary metadata to file-based routes via a meta.ts file, with parent values merged down the route tree. - [Route Groups](/guide/file-based/route-groups.md): Organize file-based routes with underscore-prefixed folders that are excluded from the URL, ideal for applying different layouts. - [Scroll Behavior (File-based)](/guide/file-based/scroll-behavior.md): Control scroll-to-top behavior on navigation and customize scroll restoration across history changes. - [View Transitions (File-based)](/guide/file-based/view-transitions.md): Enable the View Transitions API during file-based navigation and customize animation effects with CSS. ### Reference - [API Reference](/reference.md): Full API reference for sv-router — createRouter, navigate, p, isActive, route, searchParams, blockNavigation, hooks, and more. - [Vite Plugin Reference](/reference/vite-plugin.md): API reference for the sv-router Vite plugin that generates file-based route definitions from your file system. ### Other - [Tips](/guide/tips.md): Tips for managing the document head, handling errors, and deploying an sv-router SPA to popular hosting platforms.