{"id":13630157,"url":"https://github.com/mefechoel/svelte-navigator","last_synced_at":"2025-05-15T18:07:54.223Z","repository":{"id":38417749,"uuid":"262518797","full_name":"mefechoel/svelte-navigator","owner":"mefechoel","description":"Simple, accessible routing for Svelte","archived":false,"fork":false,"pushed_at":"2024-08-13T09:17:59.000Z","size":2742,"stargazers_count":515,"open_issues_count":39,"forks_count":43,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-13T00:08:50.111Z","etag":null,"topics":["a11y","accessibility","declarative","routing","spa","ssr","svelte","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mefechoel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-09T07:51:01.000Z","updated_at":"2025-05-04T15:21:03.000Z","dependencies_parsed_at":"2024-06-18T13:37:08.171Z","dependency_job_id":"a835eb4f-83ad-4ce6-ac17-4d46de63a9b4","html_url":"https://github.com/mefechoel/svelte-navigator","commit_stats":{"total_commits":230,"total_committers":17,"mean_commits":"13.529411764705882","dds":"0.22173913043478266","last_synced_commit":"d8f2a1aa750f365ac63308b0b4e804b3b33f040e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Fsvelte-navigator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Fsvelte-navigator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Fsvelte-navigator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Fsvelte-navigator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mefechoel","download_url":"https://codeload.github.com/mefechoel/svelte-navigator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394722,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","declarative","routing","spa","ssr","svelte","typescript"],"created_at":"2024-08-01T22:01:32.071Z","updated_at":"2025-05-15T18:07:54.152Z","avatar_url":"https://github.com/mefechoel.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Svelte Navigator\n\n[![npm package](https://img.shields.io/npm/v/svelte-navigator.svg?style=flat-square)](https://npmjs.com/package/svelte-navigator)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/svelte-navigator?style=flat-square)](https://bundlephobia.com/result?p=svelte-navigator)\n[![NPM](https://img.shields.io/npm/l/svelte-navigator?style=flat-square)](https://github.com/mefechoel/svelte-navigator/blob/main/LICENSE)\n[![GitHub last commit](https://img.shields.io/github/last-commit/mefechoel/svelte-navigator?style=flat-square)](https://github.com/mefechoel/svelte-navigator/commits/main)\n[![Code Style Prettier](https://img.shields.io/badge/code%20style-prettier-ff7fe1.svg?style=flat-square)](https://github.com/prettier/prettier#readme)\n[![Build Status](https://img.shields.io/github/workflow/status/mefechoel/svelte-navigator/Test?style=flat-square)](https://github.com/mefechoel/svelte-navigator/actions?query=workflow%3ATest)\n\n\u003e Simple, accessible routing for Svelte.\n\nSvelte Navigator is an accessible and relatively lightweight Single Page App\nRouter inspired by [react-router](https://github.com/ReactTraining/react-router)\nand [@reach/router](https://github.com/reach/router).\n\nThis started as a fork of\n[svelte-routing](https://github.com/EmilTholin/svelte-routing), with added\nconfiguration options and access to parts of the Routers context through\nReact-esque hooks.\n\n## Features\n\n- Accessible routing: The `Router` manages focus in your app automatically and\n  makes announcements to screen reader users\n- Relative routing: Paths and links are relative to the parent `Route` and\n  `Router`\n- Nestable `Route`s for easy, flexible and reusable component composition\n- Automatic route ranking: The `Router` chooses the best match automatically, so\n  you don't need to worry about the order of your `Route`s\n- Route parameters `user/:id` and (namable) wildcards `blog/*`,\n  `blog/*wildcardName`\n- React-esque hooks api for accessing parts of the Router context\n- Nestable Routers for seamless merging of many smaller apps\n- HTML5 history mode by default (Memory mode as fallback, or for testing)\n- SSR (**S**erver **S**ide **R**endering) support\n- TypeScript ready 🎉\n\n## Table of Contents\n\n- [Getting started](#getting-started)\n- [Installation](#installation)\n- [Usage](#usage)\n- [SSR Caveat](#ssr-caveat)\n- [FAQ](#faq)\n- [Testing](#testing)\n- [API](#api)\n  - [Components](#components)\n    - [`Router`](#router)\n    - [`Link`](#link)\n    - [`Route`](#route)\n  - [Hooks](#hooks)\n    - [`useNavigate`](#usenavigate)\n    - [`useLocation`](#uselocation)\n    - [`useResolve`](#useresolve)\n    - [`useResolvable`](#useresolvable)\n    - [`useMatch`](#usematch)\n    - [`useParams`](#useparams)\n    - [`useFocus`](#usefocus)\n  - [Programmatic Navigation](#programmatic-navigation)\n    - [`navigate`](#navigate)\n  - [Actions](#actions)\n    - [`link`](#link-1)\n    - [`links`](#links)\n  - [Custom History](#custom-history)\n  - [Deploying to Vercel](#deploying-to-vercel)\n\n## Getting started\n\n[example-folder-url]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example\n[example-basic-client-side]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/basic-client-side\n[example-custom-hash-history]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/custom-hash-history\n[example-private-routes]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/private-routes\n[example-private-routes-async]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/private-routes-async\n[example-lazy-loading]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/lazy-loading\n[example-ssr]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/ssr\n[example-url-bar]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/url-bar\n[example-transitions]:\n\thttps://github.com/mefechoel/svelte-navigator/tree/master/example/transitions\n[repl-basic-client-side]:\n\thttps://svelte.dev/repl/451fd183e0d3403cb7800101f7d799fb\n[repl-custom-hash-history]:\n\thttps://svelte.dev/repl/195011a49a714e22b1a335037e124458\n[repl-private-routes]: https://svelte.dev/repl/c81d8f3dff584065a82b2d3ea7cd4aee\n[repl-private-routes-async]:\n\thttps://svelte.dev/repl/5fe05802b7ad468188cb41f5df5bd5d5\n[repl-lazy-loading]: https://svelte.dev/repl/09abb8c287f745169f66f62d51f766d5\n[repl-url-bar]: https://svelte.dev/repl/dc82bb89447647edb0d7ed8cbe7999ae\n[repl-transitions]: https://svelte.dev/repl/321f1f8a46f1437eb171ece35681c66a\n\nLook at the [example folder][example-folder-url] for a few example project\nsetups, or checkout the examples in the Svelte REPL:\n\n- Simple basic usage in a client side rendered app\n  ([examples][example-basic-client-side], [REPL][repl-basic-client-side])\n- Private Routes for authenticated users only\n  ([examples][example-private-routes], [REPL][repl-private-routes], [async\n  example][example-private-routes-async])\n- Private Routes for authenticated users only (async auth check)\n  ([examples][example-private-routes-async], [REPL][repl-private-routes-async])\n- Using Routes to lazy load views ([examples][example-lazy-loading],\n  [REPL][repl-lazy-loading])\n- Reacting to changes in location using `useLocation`\n  ([examples][example-url-bar], [REPL][repl-url-bar])\n- SSR ([examples][example-ssr])\n- Using hash based navigation with a custom history\n  ([examples][example-custom-hash-history], [REPL][repl-custom-hash-history])\n- Smoothly transitioning between route views using svelte transitions\n  ([examples][example-transitions], [REPL][repl-transitions])\n\n## Installation\n\nWith `yarn`:\n\n```bash\nyarn add svelte-navigator\n```\n\nWith `npm`:\n\n```bash\nnpm install --save svelte-navigator\n```\n\n## Usage\n\nBasic Setup for a client-side SPA:\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n\timport { Router, Link, Route } from \"svelte-navigator\";\n\timport Home from \"./routes/Home.svelte\";\n\timport About from \"./routes/About.svelte\";\n\timport Blog from \"./routes/Blog.svelte\";\n\timport Search from \"./routes/Search.svelte\";\n\u003c/script\u003e\n\n\u003cRouter\u003e\n\t\u003cnav\u003e\n\t\t\u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n\t\t\u003cLink to=\"about\"\u003eAbout\u003c/Link\u003e\n\t\t\u003cLink to=\"blog\"\u003eBlog\u003c/Link\u003e\n\t\u003c/nav\u003e\n\t\u003cdiv\u003e\n\t\t\u003cRoute path=\"/\"\u003e\n\t\t\t\u003cHome /\u003e\n\t\t\u003c/Route\u003e\n\t\t\u003cRoute path=\"about\" component={About} /\u003e\n\t\t\u003cRoute path=\"blog/*\"\u003e\n\t\t\t\u003cRoute path=\"/\"\u003e\n\t\t\t\t\u003cBlog /\u003e\n\t\t\t\u003c/Route\u003e\n\t\t\t\u003cRoute path=\":id\" component={BlogPost} /\u003e\n\t\t\u003c/Route\u003e\n\t\t\u003cRoute path=\"search/:query\" let:params\u003e\n\t\t\t\u003cSearch query={params.query} /\u003e\n\t\t\u003c/Route\u003e\n\t\u003c/div\u003e\n\u003c/Router\u003e\n```\n\nSvelte Navigator uses the HTML5 History API by default. For it to work properly,\nyou need to setup your server correctly. If you're using sirv, as is common with\na lot of Svelte projects, you need to pass it the `--single` option.\n\nYou can read more about the History API here:\n\n- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/History)\n- [Deep dive into client side routing](https://krasimirtsonev.com/blog/article/deep-dive-into-client-side-routing-navigo-pushstate-hash)\n\n## SSR Caveat\n\nIn the browser we wait until all child `Route` components have registered with\ntheir ancestor `Router` component before we let the `Router` pick the best\nmatch. This approach is not possible on the server, because when all `Route`\ncomponents have registered and it is time to pick a match the SSR has already\ncompleted, and a document with no matching Route will be returned.\n\nWe therefore resort to picking the first matching `Route` that is registered on\nthe server, so it is of utmost importance that you **sort your Route components\nfrom the most specific to the least specific if you are using SSR**.\n\n## FAQ\n\n### I'm using Vite. Why am I getting errors with `svelte-navigator`?\n\nVite tries to optimize the dependencies of your app. Unfortunately, this process\ncan break `svelte-navigator`, because it creates two versions of a variable,\n`svelte-navigator` uses internally. To fix this update your `vite.config.js` (or\n`vite.config.ts`) file:\n\n```js\nimport { defineConfig } from \"vite\";\nimport svelte from \"@sveltejs/vite-plugin-svelte\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n\t// ... your config ...\n\tplugins: [svelte() /* ... your plugins ... */],\n\t// Add this line:\n\toptimizeDeps: { exclude: [\"svelte-navigator\"] },\n});\n```\n\n### I'm coming from `svelte-routing`. How can I switch to `svelte-navigator`?\n\n`svelte-navigator` started as a fork of\n[`svelte-routing`](https://github.com/EmilTholin/svelte-routing). Its API is\nlargely identical. Svelte Navigator mainly adds functionality through hooks.\nThings that work in Svelte Routing should just work in Svelte Navigator as well.\nSwitching libraries is as easy as updating your imports:\n\n```js\n// Change your imports from\nimport { Router, Route /* , ... */ } from \"svelte-routing\";\n// to\nimport { Router, Route /* , ... */ } from \"svelte-navigator\";\n```\n\nEnjoy added functionality, like access to the current location or params through\nhooks, scoped paths in `navigate` with `useNavigate`, nested `Route`s, improved\naccessibility and more.\n\n### Why am I getting a warning about unused props for my route components?\n\nTo be precise, this warning:\n`\u003cSvelte component\u003e was created with unknown prop 'location' \u0026 'navigate'`.\n\nThis happens, because Svelte Navigator injects the current `location` and a\nscoped `navigate` function to components rendered via the `Route`'s `component`\nprop. To avoid the warning, you can instead render your components as `Route`\nchildren:\n\n```html\n\u003c!-- No unknown props will be injected --\u003e\n\u003cRoute path=\"my/path\"\u003e\n\t\u003cMyComponent /\u003e\n\u003c/Route\u003e\n\n\u003c!-- `location` and `navigate` props will be injected --\u003e\n\u003cRoute path=\"my/path\" component=\"{MyComponent}\" /\u003e\n```\n\nRead more in the [`Route` section of the API docs](#route).\n\n### Why don't CSS classes work with `Link`?\n\n```html\n\u003cstyle\u003e\n\t/*\n\t\tSvelte will mark this class as unused and will remove it from\n\t\tthe CSS output.\n\t*/\n\t.my-link { /* ... */ }\n\u003c/style\u003e\n\n\u003cLink class=\"my-link\" to=\"my-path\"\u003e...\u003c/Link\u003e\n```\n\nHaving a class attribute on Svelte components does not work with Svelte's CSS\nscoping. Svelte does not treat class props to components as special props and\ndoes not recognize them as classnames either. Theoretically `Link` could use the\n`class` prop for something entirely different than styling, so Svelte can't make\nany assumptions about it. As far as Svelte is concerned the `class=\"my-link\"`\nattribute and the `.my-link` are totally unrelated.\n\nTo work around this, you can often make use of the scoping of a wrapping or an\ninner html element:\n\n```html\n\u003cstyle\u003e\n\t/*\n\t\t`.wrapper` is a standard html element, so Svelte will recognize its\n\t\t`class` attribute and scope any styles accordingly.\n\t\tSince part of the selector is scoped you don't need to worry about the\n\t\tglobal part leaking styles.\n\t*/\n\t.wrapper :global(.my-link) { /* ... */ }\n\n\t/*\n\t\tAgain, scoping works just fine with `.link-content`, so it can be styled\n\t\tas expected. This way you don't have direct access to the `\u003ca /\u003e` tag of\n\t\tthe `Link` however.\n\t*/\n\t.link-content { /* ... */ }\n\u003c/style\u003e\n\n\u003cdiv class=\"wrapper\"\u003e\n\t\u003cLink class=\"my-link\" to=\"my-path\"\u003e...\u003c/Link\u003e\n\u003c/div\u003e\n\n\u003cLink to=\"my-path\"\u003e\n\t\u003cspan class=\"link-content\"\u003e...\u003c/span\u003e\n\u003c/Link\u003e\n```\n\nIf that does not work for you, you can use the `use:link` action instead (which\nhas its limitations though, see [`link` section in the API docs](#link-1)).\n\n```html\n\u003cscript\u003e\n\timport { link } from \"svelte-navigator\";\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\t/* This works as expected */\n\t.my-link {\n\t\t/* ... */\n\t}\n\u003c/style\u003e\n\n\u003ca class=\"my-link\" href=\"my-path\" use:link\u003e...\u003c/a\u003e\n```\n\n### What are the weird rectangles around the headings in my app?\n\n\u003cimg\n\talt=\"Focus outline around heading\"\n\tsrc=\"./assets/focus-ring.png\"\n\twidth=\"300\"\n/\u003e\n\nThese outlines appear, because Svelte Navigator focuses a heading inside the\n`Route` that was rendered after a navigation. This helps people relying on\nassistive technology, such as screen reader users, orientate on your website. If\nthe router didn't take focus, and you were to click a link, it would remain\nfocused after the navigation. Screenreader users would just not know that\nsomething changed on the page. (This is a\n[common problem with spa routers](https://medium.com/@robdel12/single-page-apps-routers-are-broken-255daa310cf)).\nThe idea of focusing a heading is, that it gives the user a starting point from\nwhere they can tab to the changed content. Since it is just the starting point,\nyou can disable the focus ring for just the headers, which aren't focusable by\ndefault anyway. Or you could style them to better suit your design (see this\n[article about styling focus indicators](https://css-tricks.com/having-a-little-fun-with-custom-focus-styles/)).\nBut please, don't disable focus rings alltogether!\n\n## Testing\n\nWhen testing your app's components it is sometimes necessary to have them\nrendered inside an instance of `Router` or `Route`. A component could for\nexample use the `useNavigate` hook to redirect after some user interaction. This\nwill however fail if the component is not somewhere inside a `Router`. Similarly\nusing the `useFocus` hook will only work when the component is somewhere inside\na `Route`.\n\nIf you're testing your app with\n[`@testing-library/svelte`](https://github.com/testing-library/svelte-testing-library)\na custom `render` function and a `WrapRouter` component can do the trick:\n\n```js\n// renderWithRouter.js\nimport { render } from \"@testing-library/svelte\";\nimport WrapRouter from \"./WrapRouter.svelte\";\n\n/**\n * Test-render a component, that relies on some of svelte-navigator's\n * features, inside a Router.\n *\n * @param component The component you want to wrap in a Router\n * @param componentProps The props you want to pass to it\n * @param routerOptions Futher configuration (`onNavigate`,\n * `withRoute`, `initialPathname`)\n * @param options Options for testing library's `render` function\n */\nconst renderWithRouter = (component, componentProps, routerOptions, options) =\u003e\n\trender(WrapRouter, { component, componentProps, ...routerOptions }, options);\n\nexport default renderWithRouter;\n```\n\n```html\n\u003c!-- WrapRouter.svelte --\u003e\n\u003cscript\u003e\n\timport { onDestroy } from \"svelte\";\n\timport {\n\t\tRouter,\n\t\tRoute,\n\t\tcreateMemorySource,\n\t\tcreateHistory,\n\t} from \"svelte-navigator\";\n\n\t/** The component you want to wrap in a Router */\n\texport let component;\n\t/** The props you want to pass to it */\n\texport let componentProps;\n\t/**\n\t * A callback you can use to check if a navigation has occurred.\n\t * It will be called with the new location and the action that lead\n\t * to the navigation.\n\t */\n\texport let onNavigate = () =\u003e {};\n\t/**\n\t * If true, the component will be wrapped in a Route component as well.\n\t * Some features of svelte-navigator can only be used inside a Route,\n\t * for example `useParams`.\n\t */\n\texport let withRoute = false;\n\t/** Supply an initial location to the Router */\n\texport let initialPathname = \"/\";\n\n\tconst history = createHistory(createMemorySource(initialPathname));\n\n\tconst unlisten = history.listen(onNavigate);\n\n\tonDestroy(unlisten);\n\u003c/script\u003e\n\n\u003cRouter {history}\u003e\n\t{#if withRoute}\n\t\u003cRoute path=\"*\"\u003e\n\t\t\u003csvelte:component this=\"{component}\" {...componentProps} /\u003e\n\t\u003c/Route\u003e\n\t{:else}\n\t\u003csvelte:component this=\"{component}\" {...componentProps} /\u003e\n\t{/if}\n\u003c/Router\u003e\n```\n\nThen import it in your test script:\n\n```js\nimport MyComponent from \"./MyComponent.svelte\";\nimport renderWithRouter from \"../test/renderWithRouter\";\n\nit(\"works\", () =\u003e {\n\tconst { getByTestId } = renderWithRouter(MyComponent);\n\texpect(getByTestId(\"my-input\")).toHaveValue(\"my-value\");\n});\n```\n\n## API\n\n- [Components](#components)\n  - [`Router`](#router)\n  - [`Link`](#link)\n  - [`Route`](#route)\n- [Hooks](#hooks)\n  - [`useNavigate`](#usenavigate)\n  - [`useLocation`](#uselocation)\n  - [`useResolve`](#useresolve)\n  - [`useResolvable`](#useresolvable)\n  - [`useMatch`](#usematch)\n  - [`useParams`](#useparams)\n  - [`useFocus`](#usefocus)\n- [Programmatic Navigation](#programmatic-navigation)\n  - [`navigate`](#navigate)\n- [Actions](#actions)\n  - [`link`](#link-1)\n  - [`links`](#links)\n- [Custom History](#custom-history)\n\n### Components\n\nThe main elements to configure and use routing in your Svelte app.\n\n#### `Router`\n\nThe `Router` component supplies the `Link` and `Route` descendant components\nwith routing information through context, so you need at least one `Router` at\nthe top of your application. It assigns a score to all its `Route` descendants\nand picks the best match to render.\n\n```html\n\u003cRouter\u003e\n\t\u003cLink to=\"profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\u003cLink to=\"blog\"\u003eGo to /blog\u003c/Link\u003e\n\t\u003cRoute path=\"blog\" component={Blog} /\u003e\n\t\u003cRoute path=\"profile\" component={Profile} /\u003e\n\u003c/Router\u003e\n```\n\nThe `Router` will automatically manage focus in your app. When you change\n`Route`s, it will focus the first heading in the matched `Route`.\n\nIf you have multiple `Router`s, for example one for a navigation bar and one for\nthe main content, make sure to pass `primary={false}` to all `Router`s, you\ndon't want to manage focus (in this case the nav `Router`).\n\n```html\n\u003cRouter primary={false}\u003e\n\t\u003cnav\u003e\n\t\t\u003cLink to=\"profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\t\u003cLink to=\"blog\"\u003eGo to /blog\u003c/Link\u003e\n\t\u003c/nav\u003e\n\u003c/Router\u003e\n\u003c!-- ... --\u003e\n\u003cRouter\u003e\n\t\u003cmain\u003e\n\t\t\u003cRoute path=\"blog\" component={Blog} /\u003e\n\t\t\u003cRoute path=\"profile\" component={Profile} /\u003e\n\t\u003c/main\u003e\n\u003c/Router\u003e\n```\n\nIf you want to focus a different element, like a skip-navigtion-link or an info\ntext, you can use the `useFocus` hook, to specify a custom focus element.\n\nSvelte navigator also announces navigations to a screen reader. You can\ncustomize its message (i.e. for localization) via the `a11y.createAnnouncement`\nprop.\n\nIf you're interested in accessibility concerns in SPA routers you can check out\n[this article](https://www.gatsbyjs.org/blog/2019-07-11-user-testing-accessible-client-routing/),\nwhich provided much of the information, regarding focus management, used for\nimplementing Svelte Navigators focus management.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n\timport { Router, Route, Link } from \"svelte-navigator\";\n\n\t// Provide a custom message when navigating using\n\t// a routes `meta` information\n\tfunction createAnnouncement(route, location) {\n\t\tconst viewName = route.meta.name;\n\t\tconst { pathname } = location;\n\t\treturn `Navigated to the ${viewName} view at ${pathname}`;\n\t}\n\u003c/script\u003e\n\n\u003cRouter a11y=\"{{ createAnnouncement }}\"\u003e\n\t\u003cLink to=\"profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\u003cRoute\n\t\tpath=\"profile\"\n\t\tcomponent=\"{Profile}\"\n\t\tmeta=\"{{ name: 'user profile' }}\"\n\t/\u003e\n\t\u003cRoute path=\"blog/*\" meta=\"{{ name: 'blog' }}\"\u003e\n\t\t\u003cBlog /\u003e\n\t\u003c/Route\u003e\n\u003c/Router\u003e\n\n\u003c!-- Blog.svelte --\u003e\n\u003cscript\u003e\n\timport { Route, Link, useFocus } from \"svelte-navigator\";\n\n\t// Provide a custom element to focus when this Route is navigated to\n\tconst registerFocus = useFocus();\n\n\tfunction skipNavigation() { /* ... */ }\n\u003c/script\u003e\n\n\u003cbutton use:registerFocus on:click={skipNavigation}\u003e\n\tSkip navigation\n\u003c/button\u003e\n\u003cLink to=\"svelte\"\u003eGo to /blog/svelte\u003c/Link\u003e\n\u003cLink to=\"navigator\"\u003eGo to /blog/navigator\u003c/Link\u003e\n\u003cRoute path=\"svelte\"\u003eYeah, Svelte!\u003c/Route\u003e\n\u003cRoute path=\"navigator\"\u003eYeah, Routing!\u003c/Route\u003e\n```\n\n`Router` components can also be nested to allow for seamless merging of many\nsmaller apps. Just make sure not to forget the wildcard (`*`) in the parent\n`Route`s path.\n\nIt's probably easier to nest `Route`s though.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cRouter\u003e\n\t\u003cLink to=\"profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\u003cRoute path=\"profile\" component=\"{Profile}\" /\u003e\n\t\u003cRoute path=\"blog/*\"\u003e\n\t\t\u003cBlog /\u003e\n\t\u003c/Route\u003e\n\u003c/Router\u003e\n\n\u003c!-- Blog.svelte --\u003e\n\u003cRouter\u003e\n\t\u003cLink to=\"svelte\"\u003eGo to /blog/svelte\u003c/Link\u003e\n\t\u003cLink to=\"navigator\"\u003eGo to /blog/navigator\u003c/Link\u003e\n\t\u003c!-- Break out of the scope of the current Router --\u003e\n\t\u003cLink to=\"../profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\u003cRoute path=\"svelte\"\u003eYeah, Svelte!\u003c/Route\u003e\n\t\u003cRoute path=\"navigator\"\u003eYeah, Routing!\u003c/Route\u003e\n\t\u003cRoute path=\":id\" let:params\u003e\n\t\t\u003cBlogPost id={params.id} /\u003e\n\t\u003c/Route\u003e\n\u003c/Router\u003e\n```\n\nWhen you are serving your app from a subdirectory on your server, you can add a\n`basepath` prop to the router. It will be prepended to all routes and to all\nresolved navigations (i.e. using `Link`, `useNavigate` or `useResolve`). A\nproperly formatted `basepath` should have a leading, but no trailing slash.\n\n```html\n\u003cRouter basepath=\"/base\"\u003e\n\t\u003cLink to=\"profile\"\u003eGo to /base/profile\u003c/Link\u003e\n\t\u003cLink to=\"blog\"\u003eGo to /base/blog\u003c/Link\u003e\n\t\u003cRoute path=\"blog\" component={Blog} /\u003e\n\t\u003cRoute path=\"profile\" component={Profile} /\u003e\n\u003c/Router\u003e\n```\n\nBy default `Router`s use the HTML5 history API for navigation. You can provide a\ndifferent history through the `history` prop. Svelte Navigator ships with a\nmemory based history, which is used, when the application does not seem to run\nin a browser (i.e. in a test environment) or in an embedded page, like the\nSvelte REPL. You can explicitly set the memory history or you can provide your\nown implementation (for example a [Hash based\nhistory][example-custom-hash-history]).\n\n```html\n\u003cscript\u003e\n\timport { createHistory, createMemorySource } from \"svelte-navigator\";\n\n\tconst memoryHistory = createHistory(createMemorySource());\n\u003c/script\u003e\n\n\u003cRouter history=\"{memoryHistory}\"\u003e\n\t\u003c!-- ... --\u003e\n\u003c/Router\u003e\n```\n\nIf you have a strict Content Security Policy, inline styles might be forbidden.\nSvelte-Navigator makes some use of inline styles though for internal marker\nelements and for screen reader announcements. If that is the case, you can\ndisable inline styles, though you need to import those styles manually. If you\nhave a bundler set up, that will be as easy as adding one import statement to\nyour applications entry point. Otherwise, you might need to copy the contents of\n[`svelte-navigator.css`](https://github.com/mefechoel/svelte-navigator/blob/main/svelte-navigator.css)\ninto your applications css.\n\n```js\n// In your applications entrypoint, such as `index.js` or `main.js`\nimport \"svelte-navigator/svelte-navigator.css\";\n```\n\n###### Properties\n\n|         Property          |         Type         |             Default Value              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |\n| :-----------------------: | :------------------: | :------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|        `basepath`         |       `string`       |                 `'/'`                  | The `basepath` property will be added to all `path` properties of `Route` descendants and to every navigation, that has access to the Routers context (from a `Link` with a `to` property or via `useNavigate`). This property can be ignored in most cases, but if you host your application on e.g. `https://example.com/my-site`, the `basepath` should be set to `/my-site`. Note that `navigate` and the `link` and `links` actions don't have access to the context. You may resolve the link manually using the `useResolve` hook. |\n|           `url`           |       `string`       |                  `''`                  | The `url` property is used in SSR to force the current URL of the application and will be used by all `Link` and `Route` descendants. A falsy value will be ignored by the `Router`, so it's enough to declare `export let url = '';` for your topmost component and only give it a value in SSR.                                                                                                                                                                                                                                         |\n|         `history`         |   `HistorySource`    |            \\\u003cHTML5 History\u003e            | The `history` property can be used to use a navigation method other than the browsers History API (See [custom Hash based history][example-custom-hash-history]).                                                                                                                                                                                                                                                                                                                                                                         |\n|         `primary`         |      `boolean`       |                 `true`                 | If set to false, the `Router` will not manage focus for its children. Analougus to the `Route`s `primary` prop.                                                                                                                                                                                                                                                                                                                                                                                                                           |\n|          `a11y`           |       `object`       |                                        | Configuration object for Svelte Navigators accessibility features                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `a11y.createAnnouncement` | `CreateAnnouncement` | `route =\u003e 'Navigated to ${route.uri}'` | Function to create an announcement message, that is read by screen readers on navigation. It takes the matched `Route` and the current `location` as arguments and returns a `string` or a `Promise`, that resolves to a `string`.                                                                                                                                                                                                                                                                                                        |\n|   `a11y.announcements`    |      `boolean`       |                 `true`                 | Set it to false, to disable screen reader announcements                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n|   `disableInlineStyles`   |      `boolean`       |                `false`                 | Disable the inline styles, that are used internally by svelte-navigator. This might be necessary when your Content Security Policy disallows inline styles. To still remain functional, be sure to include the [`svelte-navigator.css`](https://github.com/mefechoel/svelte-navigator/blob/main/svelte-navigator.css) in your application.                                                                                                                                                                                                |\n\nWhere:\n\n```ts\ninterface Route {\n\turi: string;\n\tpath: string;\n\tmeta: object;\n\tparams: object;\n}\n\ninterface Location {\n\tpathname: string;\n\tsearch: string;\n\thash: string;\n\tstate: object;\n}\n\ntype CreateAnnouncement = (\n\troute: Route,\n\tlocation: Location,\n) =\u003e string | Promise\u003cstring\u003e;\n\ninterface HistorySource {\n\treadonly location: Location;\n\taddEventListener(event: \"popstate\", handler: () =\u003e void): void;\n\tremoveEventListener(event: \"popstate\", handler: () =\u003e void): void;\n\thistory: {\n\t\treadonly state: object;\n\t\tpushState(state: object, title: string, uri: string): void;\n\t\treplaceState(state: object, title: string, uri: string): void;\n\t\tgo(to: number): void;\n\t};\n}\n```\n\n#### `Link`\n\nA component used to navigate around the application. It will automatically\nresolve the `to` path relative to the current `Route` and to the `Router`s\n`basepath`.\n\n```html\n\u003cRouter\u003e\n\t\u003cRoute path=\"blog/*\"\u003e\n\t\t\u003cLink to=\"svelte\"\u003eGo to /blog/svelte\u003c/Link\u003e\n\t\t\u003cLink to=\"../profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\u003c/Route\u003e\n\u003c/Router\u003e\n```\n\n```html\n\u003cRouter basepath=\"/base\"\u003e\n\t\u003cRoute path=\"blog/*\"\u003e\n\t\t\u003cLink to=\"svelte\"\u003eGo to /base/blog/svelte\u003c/Link\u003e\n\t\t\u003cLink to=\"../profile\"\u003eGo to /base/profile\u003c/Link\u003e\n\t\u003c/Route\u003e\n\u003c/Router\u003e\n```\n\n###### Properties\n\n|  Property  |    Type    | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| :--------: | :--------: | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|    `to`    | `string` ️ |               | URL the component should link to. It will be resolved relative to the current Route.                                                                                                                                                                                                                                                                                                                                                                                   |\n| `replace`  | `boolean`  |    `false`    | When `true`, clicking the `Link` will replace the current entry in the history stack instead of adding a new one.                                                                                                                                                                                                                                                                                                                                                      |\n|  `state`   |  `object`  |     `{}`      | An object that will be pushed to the history stack when the `Link` is clicked. A state is arbitrary data, that you don't want to communicate through the url, much like the body of a HTTP POST request.                                                                                                                                                                                                                                                               |\n| `getProps` | `GetProps` |    `null`     | A function that returns an object that will be spread on the underlying anchor element's attributes. The first argument given to the function is an object with the properties `location`, `href`, `isPartiallyCurrent`, `isCurrent`. Look at the [`NavLink` component in the example project setup](https://github.com/mefechoel/svelte-navigator/tree/master/example/ssr/src/components/NavLink.svelte) to see how you can build your own link components with this. |\n\nWhere:\n\n```ts\ninterface Location {\n\tpathname: string;\n\tsearch: string;\n\thash: string;\n\tstate: object;\n}\n\ntype GetProps = ({\n\tlocation: Location;\n\thref: string;\n\tisPartiallyCurrent: boolean;\n\tisCurrent: boolean;\n}) =\u003e object;\n```\n\nAll other props will be passed to the underlying `\u003ca /\u003e` element. If the passed\nprops and the props returned from `getProps` contain clashing keys, the values\nreturned from `getProps` will be used.\n\n#### `Route`\n\nA component that will render its `component` property or children when its\nancestor `Router` component decides it is the best match.\n\nAll properties other than `path`, `component`, `meta` and `primary` given to the\n`Route` will be passed to the rendered `component`.\n\nA `Route` path can match parameters with `\"path/:parameterName\"` and wildcards\nwith `\"path/*\"` or `\"path/*wildcardName\"`. All parameters and wildcard values\nwill be provided to the `component` as props. They can also be accessed inside a\n`Route` slot via `let:params`.\n\nThe `Route` `component` will also receive the current `location`, as well as the\n`navigate` function, that is scoped to the current `Route` as props. They can be\naccessed inside the `Route` slot, via `let:location` and `let:navigate`.\n\n```html\n\u003c!-- Both variants will do the same --\u003e\n\u003cRoute path=\"blog/:id\" component=\"{BlogPost}\" /\u003e\n\u003cRoute path=\"blog/:id\" let:params\u003e\n\t\u003cBlogPost id=\"{params.id}\" /\u003e\n\u003c/Route\u003e\n\n\u003c!-- Access the current location inside the slot --\u003e\n\u003cRoute path=\"search\" let:location\u003e\n\t\u003cBlogPost queryString=\"{location.search}\" /\u003e\n\u003c/Route\u003e\n\n\u003c!--\n  Navigate programatically using relative links\n  (See also `navigate` and `useNavigate`)\n--\u003e\n\u003cRoute path=\"search\" let:navigate\u003e\n\t\u003cBlogPost {navigate} /\u003e\n\u003c/Route\u003e\n\n\u003c!--\n  Routes without a path are default routes.\n  They will match if no other Route could be matched\n--\u003e\n\u003cRoute component=\"{Home}\"\u003e\u003c/Route\u003e\n```\n\nYou can nest `Route`s, to easily define a routing structure for your app. Just\nremember to add a splat (`*`) to the end of the parent `Route`s `path`.\n\n```html\n\u003c!-- Don't forget the '*' --\u003e\n\u003cRoute path=\"blog/*\"\u003e\n\t\u003c!-- Render specific post with id \"123\" at /blog/post/123 --\u003e\n\t\u003cRoute path=\"post/:id\" component=\"{BlogPost}\" /\u003e\n\t\u003c!-- Index Route for /blog --\u003e\n\t\u003cRoute path=\"/\" component=\"{Favourites}\" /\u003e\n\u003c/Route\u003e\n\u003cRoute component=\"{Home}\"\u003e\u003c/Route\u003e\n```\n\nYou can also provide a `meta` prop to a `Route`, that you can use to identify\nthe `Route` for example, when providing a custom `a11y.createAnnouncement`\nfunction the the parent `Router`.\n\n```html\n\u003cscript\u003e\n\timport { Router, Route, Link } from \"svelte-navigator\";\n\n\t// Provide a custom message when navigating using\n\t// a routes `meta` information\n\tfunction createAnnouncement(route, location) {\n\t\tconst viewName = route.meta.name;\n\t\tconst { pathname } = location;\n\t\treturn `Navigated to the ${viewName} view at ${pathname}`;\n\t}\n\u003c/script\u003e\n\n\u003cRouter a11y=\"{{ createAnnouncement }}\"\u003e\n\t\u003cLink to=\"profile\"\u003eGo to /profile\u003c/Link\u003e\n\t\u003cRoute\n\t\tpath=\"profile\"\n\t\tcomponent=\"{Profile}\"\n\t\tmeta=\"{{ name: 'user profile' }}\"\n\t/\u003e\n\t\u003cRoute path=\"blog/*\" meta=\"{{ name: 'blog' }}\"\u003e\n\t\t\u003cBlog /\u003e\n\t\u003c/Route\u003e\n\u003c/Router\u003e\n```\n\n###### Properties\n\n|  Property   |       Type        | Default Value | Description                                                                                                                                                              |\n| :---------: | :---------------: | :-----------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|   `path`    |     `string`      |     `''`      | The path for when this component should be rendered. If no `path` is given the `Route` will act as the default that matches if no other `Route` in the `Router` matches. |\n| `component` | `SvelteComponent` |    `null`     | The component constructor that will be used for rendering when the `Route` matches. If `component` is not set, the children of `Route` will be rendered instead.         |\n|   `meta`    |     `object`      |     `{}`      | An arbitrary object you can pass the `Route`, to later access it (for example in `a11y.createAnnouncement`).                                                             |\n|  `primary`  |     `boolean`     |    `true`     | If set to false, the parent `Router` will not manage focus for this `Route` or any child `Route`s.                                                                       |\n\n### Hooks\n\nSvelte Navigator exposes a few React-esque hooks to access parts of the\n`Router`s context. These hooks **must always be called during component\ninitialization**, because thats when Sveltes `getContext` must be called.\n\nAll navigator hooks return either a readable store you can subscibe to, or a\nfunction, that internally interacts with the Routers context.\n\n#### `useNavigate`\n\nA hook, that returns a context-aware version of `navigate`. It will\nautomatically resolve the given link relative to the current Route.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n\timport { Router, Route } from \"svelte-navigator\";\n\timport RouteComponent from \"./RouteComponent.svelte\";\n\u003c/script\u003e\n\n\u003cRouter\u003e\n\t\u003cRoute path=\"routePath\"\u003e\n\t\t\u003cRouteComponent /\u003e\n\t\u003c/Route\u003e\n\t\u003c!-- ... --\u003e\n\u003c/Router\u003e\n\n\u003c!-- RouteComponent.svelte --\u003e\n\u003cscript\u003e\n\timport { useNavigate } from \"svelte-navigator\";\n\n\tconst navigate = useNavigate();\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{() =\u003e navigate('relativePath')}\"\u003e\n\tgo to /routePath/relativePath\n\u003c/button\u003e\n\u003cbutton on:click=\"{() =\u003e navigate('/absolutePath')}\"\u003e\n\tgo to /absolutePath\n\u003c/button\u003e\n```\n\nIt will also resolve a link against the `basepath` of the Router\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cRouter basepath=\"/base\"\u003e\n\t\u003cRoute path=\"routePath\"\u003e\n\t\t\u003cRouteComponent /\u003e\n\t\u003c/Route\u003e\n\t\u003c!-- ... --\u003e\n\u003c/Router\u003e\n\n\u003c!-- RouteComponent.svelte --\u003e\n\u003cscript\u003e\n\timport { useNavigate } from \"svelte-navigator\";\n\n\tconst navigate = useNavigate();\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{() =\u003e navigate('relativePath')}\"\u003e\n\tgo to /base/routePath/relativePath\n\u003c/button\u003e\n\u003cbutton on:click=\"{() =\u003e navigate('/absolutePath')}\"\u003e\n\tgo to /base/absolutePath\n\u003c/button\u003e\n```\n\nThe returned `navigate` function is identical to the `navigate` prop, that is\npassed to a `Route`s `component`. `useNavigate`s advantage is, that you can use\nit easily in deeply nested components.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cRouter\u003e\n\t\u003cRoute path=\"routeA\" component=\"{RouteA}\" /\u003e\n\t\u003cRoute path=\"routeB\" let:navigate\u003e\n\t\t\u003cRouteB {navigate} /\u003e\n\t\u003c/Route\u003e\n\t\u003cRoute path=\"routeC\"\u003e\n\t\t\u003cRouteC /\u003e\n\t\u003c/Route\u003e\n\t\u003c!-- ... --\u003e\n\u003c/Router\u003e\n\n\u003c!-- All three components can use the navigate function in the same way --\u003e\n\u003c!-- RouteA.svelte --\u003e\n\u003cscript\u003e\n\texport let navigate;\n\u003c/script\u003e\n\n\u003c!-- RouteB.svelte --\u003e\n\u003cscript\u003e\n\texport let navigate;\n\u003c/script\u003e\n\n\u003c!-- RouteC.svelte --\u003e\n\u003cscript\u003e\n\timport { useNavigate } from \"svelte-navigator\";\n\tconst navigate = useNavigate();\n\u003c/script\u003e\n```\n\nThe returned `navigate` function accepts the same parameters as the global\n[`navigate`](#navigate) function.\n\n###### Parameters\n\n|     Parameter     |        Type        | Default Value | Description                                                                                                                                                                                                                                           |\n| :---------------: | :----------------: | :-----------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|       `to`        | `string \\| number` |               | The path you want to navigate to. If `to` is a `number`, it is used to navigate in through the existing history stack, to the entry with the index `currentStackIndex + to` (`navigate(-1)` is equivalent to hitting the back button in your browser) |\n|     `options`     |      `object`      |               | The navigation options                                                                                                                                                                                                                                |\n|  `options.state`  |      `object`      |     `{}`      | An arbitrary object, that will be pushed to the history state stack                                                                                                                                                                                   |\n| `options.replace` |     `boolean`      |    `false`    | If `true`, the current entry in the history stack will be replaced with the next navigation, instead of pushing the next navigation onto the stack                                                                                                    |\n\n#### `useLocation`\n\nAccess the current location via a readable store and react to changes in\nlocation.\n\n```html\n\u003c!-- RouteComponent.svelte --\u003e\n\u003cscript\u003e\n\timport { useLocation } from \"svelte-navigator\";\n\n\tconst location = useLocation();\n\n\t$: console.log($location);\n\t/*\n\t  {\n\t    pathname: \"/blog\",\n\t    search: \"?id=123\",\n\t    hash: \"#comments\",\n\t    state: {}\n\t  }\n\t*/\n\u003c/script\u003e\n```\n\n#### `useResolve`\n\nResolve a given link relative to the current `Route` and the `Router`s\n`basepath`. It is used under the hood in `Link` and `useNavigate`. You can use\nit to manually resolve links, when using the `link` or `links` actions. (See\n[`link`](#link-1))\n\n```html\n\u003cscript\u003e\n\timport { link, useResolve } from \"svelte-navigator\";\n\n\texport let path;\n\n\tconst resolve = useResolve();\n\t// `resolvedLink` will be resolved relative to its parent Route\n\t// and the Router `basepath`\n\t$: resolvedLink = resolve(path);\n\u003c/script\u003e\n\n\u003ca href=\"{resolvedLink}\" use:link\u003eRelative link\u003c/a\u003e\n```\n\nNote, that you might need to re-resolve the link, to avoid stale links on\nlocation changes. You can achive this by deriving a store from the `$location`\nstore, or by forcing Svelte to recompute the reactive `resolvedLink` variable,\nby passing `$location` as a second argument to `resolve`:\n\n```html\n\u003cscript\u003e\n\timport { link, useResolve, useLocation } from \"svelte-navigator\";\n\n\texport let path;\n\n\tconst resolve = useResolve();\n\tconst location = useLocation();\n\t// Force Svelte to re-run this assignement, when location changes\n\t$: resolvedLink = resolve(path, $location);\n\u003c/script\u003e\n\n\u003ca href=\"{resolvedLink}\" use:link\u003eRelative link\u003c/a\u003e\n```\n\n#### `useResolvable`\n\nResolve a given link relative to the current `Route` and the `Router`s\n`basepath`. It works very similar to `useResolve`, but returns a store of the\nresolved path, that updates, when location changes. You will prabably want to\nuse `useResolvable`, when the path you want to resolve does not change, and\n`useResolve`, when you're path is changing, for example, when you get it from a\nprop.\n\nYou can use `useResolvable` to manually resolve links, when using the `link` or\n`links` actions. (See [`link`](#link-1))\n\n```html\n\u003cscript\u003e\n\timport { link, useResolvable } from \"svelte-navigator\";\n\n\t// `resolvedLink` will be resolved relative to its parent Route\n\t// and the Router `basepath`\n\tconst resolvedLink = useResolvable(\"relativePath\");\n\u003c/script\u003e\n\n\u003ca href=\"{$resolvedLink}\" use:link\u003eRelative link\u003c/a\u003e\n```\n\n#### `useMatch`\n\nUse Svelte Navigators matching without needing to use a `Route`. Returns a\nreadable store with the potential match, that changes, when the location\nchanges.\n\n```html\n\u003cscript\u003e\n\timport { useMatch } from \"svelte-navigator\";\n\n\tconst relativeMatch = useMatch(\"relative/path/:to/*somewhere\");\n\tconst absoluteMatch = useMatch(\"/absolute/path/:to/*somewhere\");\n\n\t$: console.log($relativeMatch.params.to);\n\t$: console.log($absoluteMatch.params.somewhere);\n\u003c/script\u003e\n```\n\n#### `useParams`\n\nAccess the parent Routes matched params and wildcards via a readable store.\n\n```html\n\u003c!--\n\tSomewhere inside \u003cRoute path=\"user/:id/*splat\" /\u003e\n\twith a current url of \"/myApp/user/123/pauls-profile\"\n--\u003e\n\u003cscript\u003e\n\timport { useParams } from \"svelte-navigator\";\n\n\tconst params = useParams();\n\n\t$: console.log($params); // -\u003e { id: \"123\", splat: \"pauls-profile\" }\n\u003c/script\u003e\n\n\u003ch3\u003eWelcome user {$params.id}! bleep bloop...\u003c/h3\u003e\n```\n\n#### `useFocus`\n\nProvide a custom element to focus, when the parent route is visited. It returns\nthe `registerFocus` action you can apply to an element via the `use` directive:\n\n```html\n\u003c!-- Somewhere inside a Route --\u003e\n\u003cscript\u003e\n\timport { useFocus } from \"svelte-navigator\";\n\n\tconst registerFocus = useFocus();\n\u003c/script\u003e\n\n\u003ch1\u003eDon't worry about me...\u003c/h1\u003e\n\u003cp use:registerFocus\u003eHere, look at me!\u003c/p\u003e\n```\n\nYou can also use `registerFocus` asynchronously:\n\n```html\n\u003c!-- Somewhere inside a Route --\u003e\n\u003cscript\u003e\n\timport { onMount } from \"svelte\";\n\timport { useFocus } from \"svelte-navigator\";\n\n\tconst registerFocus = useFocus();\n\n\tconst lazyImport = import(\"./MyComponent.svelte\").then(\n\t\tmodule =\u003e module.default,\n\t);\n\u003c/script\u003e\n\n{#await lazyImport then MyComponent}\n\u003cMyComponent {registerFocus} /\u003e\n{/await}\n\n\u003c!-- MyComponent.svelte --\u003e\n\u003cscript\u003e\n\texport let registerFocus;\n\u003c/script\u003e\n\n\u003ch1 use:registerFocus\u003eHi there!\u003c/h1\u003e\n```\n\nYou should however only use it asynchronously, if you **know**, that the focus\nelement will register soon. Otherwise, focus will remain at the clicked link,\nand randomly change a few seconds later without explanation, which is a very bad\nexperience for screen reader users.\n\nWhen you need to wait for data, before you can render a component, you should\nconsider providing a hidden heading, that informs a screen reader user about the\ncurrent loading process.\n\n```html\n\u003c!-- Somewhere inside a Route --\u003e\n\u003cscript\u003e\n\timport { onMount } from \"svelte\";\n\timport { useFocus } from \"svelte-navigator\";\n\timport BlogPost from \"./BlogPost.svelte\";\n\n\tconst registerFocus = useFocus();\n\n\tconst blogPostRequest = fetch(\"some/blog/post\");\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\t.visuallyHidden {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\tclip: rect(0, 0, 0, 0);\n\t\twhite-space: nowrap;\n\t\tborder: 0;\n\t}\n\u003c/style\u003e\n\n{#await blogPostRequest}\n\u003ch1 class=\"visuallyHidden\" use:registerFocus\u003e\n\tThe blog post is being loaded...\n\u003c/h1\u003e\n{:then data}\n\u003cBlogPost {data} /\u003e\n{/await}\n```\n\n### Programmatic Navigation\n\nSvelte Navigator exports a global `navigate` function, you can use to\nprogrammatically navigate around your application.\n\nIt will however not be able to perform relative navigation. Use the\n`useNavigate` hook instead.\n\nIf your using a custom history (for example with `createMemorySource`), the\ncreated history will have its own `navigate` function. Calling the globally\nexported function, will not work as intended.\n\nIf you're serving your app from a subdirectory or if you're using a custom\nhistory, it is not advised to use `navigate`. Use `useNavigate` instead.\n\n#### `navigate`\n\nA function that allows you to imperatively navigate around the application for\nthose use cases where a `Link` component is not suitable, e.g. after submitting\na form.\n\nThe first argument is a string denoting where to navigate to, and the second\nargument is an object with a `replace` and `state` property equivalent to those\nin the `Link` component.\n\nNote that `navigate` does not have access to the Routers context, so it cannot\nautomatically resolve relative links. You might prefer `useNavigate` instead.\n\n```html\n\u003cscript\u003e\n\timport { navigate } from \"svelte-navigator\";\n\n\tfunction onSubmit() {\n\t\tlogin().then(() =\u003e {\n\t\t\tnavigate(\"/success\", { replace: true });\n\t\t});\n\t}\n\u003c/script\u003e\n```\n\nIf the first parameter to `navigate` is a number, it is used to navigate the\nhistory stack (for example for a browser like \"go back/go forward\"\nfunctionality).\n\n```html\n\u003cscript\u003e\n\timport { navigate } from \"svelte-navigator\";\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{() =\u003e navigate(-1)}\"\u003eBack\u003c/button\u003e\n\u003cbutton on:click=\"{() =\u003e navigate(1)}\"\u003eForward\u003c/button\u003e\n```\n\n###### Parameters\n\n|     Parameter     |        Type        | Default Value | Description                                                                                                                                                                                                                                         |\n| :---------------: | :----------------: | :-----------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|       `to`        | `string \\| number` |               | The path you want to navigate to. If `to` is a number, it is used to navigate in through the existing history stack, to the entry with the index `currentStackIndex + to` (`navigate(-1)` is equivalent to hitting the back button in your browser) |\n|     `options`     |      `object`      |               | The navigation options                                                                                                                                                                                                                              |\n|  `options.state`  |      `object`      |     `{}`      | An arbitrary object, that will be pushed to the history state stack                                                                                                                                                                                 |\n| `options.replace` |     `boolean`      |    `false`    | If true, the current entry in the history stack will be replaced with the next navigation, instead of pushing the next navigation onto the stack                                                                                                    |\n\n### Actions\n\nYou can use the `link` and `links` actions, to use standard `\u003ca href=\"...\" /\u003e`\nelements for navigation.\n\n#### `link`\n\nAn action used on anchor tags to navigate around the application. You can add an\nattribute `replace` to replace the current entry in the history stack instead of\nadding a new one.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n\timport { link, Route, Router } from \"svelte-navigator\";\n\timport RouteComponent from \"./RouteComponent.svelte\";\n\u003c/script\u003e\n\n\u003cRouter\u003e\n\t\u003ca href=\"/\" use:link\u003eHome\u003c/a\u003e\n\t\u003ca href=\"/replace\" use:link replace\u003eReplace this URL\u003c/a\u003e\n\t\u003c!-- ... --\u003e\n\u003c/Router\u003e\n```\n\nYou should note that an action has no access to sveltes context, so links will\nnot automatically be resolved on navigation. This will be a problem when you\nwant to take advantage of Svelte Navigators relative navigation or when your app\nis served from a subdirectory. You can use the `useResolve` hook to resolve the\nlink manually.\n\n```html\n\u003cscript\u003e\n\timport { link, useResolve } from \"svelte-navigator\";\n\n\tconst resolve = useResolve();\n\t// `resolvedLink` will be \"/route1/relativePath\"\n\tconst resolvedLink = resolve(\"relativePath\");\n\u003c/script\u003e\n\n\u003ca href=\"{resolvedLink}\" use:link\u003eRelative link\u003c/a\u003e\n```\n\n`link` uses the global `navigate` function by default, so if you're not using\nthe default history mode (for example, memory mode or a [custom\nhistory][example-custom-hash-history]), navigating with it will not work as\nintended. To fix this, you could either use a `Link` component, or you can pass\na custom `navigate` function to the action.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n\timport {\n\t\tlink,\n\t\tRoute,\n\t\tRouter,\n\t\tcreateHistory,\n\t\tcreateMemorySource,\n\t} from \"svelte-navigator\";\n\n\tconst memoryHistory = createHistory(createMemorySource());\n\tconst { navigate } = memoryHistory;\n\u003c/script\u003e\n\n\u003cRouter history=\"{memoryHistory}\"\u003e\n\t\u003ca href=\"/\" use:link=\"{navigate}\"\u003eHome\u003c/a\u003e\n\t\u003c!-- ... --\u003e\n\u003c/Router\u003e\n```\n\nBecause of the issues with link resolution and the dependency on the global\nnavigation function, it is generally advised, not to use the `link` and `links`\nactions if you're not using a standard app, with all the default configuration.\n\n#### `links`\n\nAn action used on a root element to make all relative anchor elements navigate\naround the application. You can add an attribute `replace` on any anchor to\nreplace the current entry in the history stack instead of adding a new one. You\ncan add an attribute `noroute` for this action to skip over the anchor and allow\nit to use the native browser action.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n\timport { links, Router } from \"svelte-navigator\";\n\u003c/script\u003e\n\n\u003cdiv use:links\u003e\n\t\u003cRouter\u003e\n\t\t\u003ca href=\"/\"\u003eHome\u003c/a\u003e\n\t\t\u003ca href=\"/replace\" replace\u003eReplace this URL\u003c/a\u003e\n\t\t\u003ca href=\"/native\" noroute\u003eUse the native action\u003c/a\u003e\n\t\t\u003c!-- ... --\u003e\n\t\u003c/Router\u003e\n\u003c/div\u003e\n```\n\nAs with the `link` action, the `href` attribute of the used `\u003ca /\u003e` elements\nwill not be resolved automatically.\n\nIf you're using a custom history, you need to pass its `navigate` function to\nthe `links` function, just like you have to do with `link`.\n\n### Custom History\n\nIf you don't want to use the HTML5 History API for Navigation, you can use a\ncustom history.\n\nSvelte Navigator comes with a memory based history, you can use. It is practical\nfor testing.\n\nTo create a custom history, pass a history source to the `createHistory`\nfunction.\n\nYou could use multiple Routers, that don't interfere with each other, by using a\ndifferent history for each one.\n\n```html\n\u003cscript\u003e\n\timport { Router, createHistory, createMemorySource } from \"svelte-navigator\";\n\n\tconst html5History = createHistory(window);\n\tconst memoryHistory = createHistory(createMemorySource());\n\u003c/script\u003e\n\n\u003cRouter history=\"{html5History}\"\u003e\n\t\u003c!-- I will function like the standard Router --\u003e\n\u003c/Router\u003e\n\n\u003cRouter history=\"{memoryHistory}\"\u003e\n\t\u003c!-- I store the history stack in memory --\u003e\n\u003c/Router\u003e\n```\n\nFor a more advanced example, checkout the [Custom Hash History\nexample][example-custom-hash-history].\n\n## Deploying to Vercel\n\nTo make sure your deeplinks work when you deploy to vercel remember to add this\nrule to your `vercel.json` file\n\n```json\n{\n\t\"rewrites\": [{ \"source\": \"/(.*)\", \"destination\": \"/\" }]\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmefechoel%2Fsvelte-navigator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmefechoel%2Fsvelte-navigator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmefechoel%2Fsvelte-navigator/lists"}