{"id":13722803,"url":"https://github.com/jorgegorka/svelte-router","last_synced_at":"2026-01-26T18:09:13.647Z","repository":{"id":40613948,"uuid":"192064581","full_name":"jorgegorka/svelte-router","owner":"jorgegorka","description":"Svelte Router adds routing to your Svelte apps. It's designed for Single Page Applications (SPA). Includes localisation, guards and nested layouts.","archived":false,"fork":false,"pushed_at":"2024-06-18T06:17:33.000Z","size":703,"stargazers_count":537,"open_issues_count":32,"forks_count":41,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-10-23T01:32:09.114Z","etag":null,"topics":["hacktoberfest","javascript","router","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jorgegorka.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2019-06-15T10:12:52.000Z","updated_at":"2025-10-02T16:35:02.000Z","dependencies_parsed_at":"2024-01-06T01:09:33.824Z","dependency_job_id":"b246ce36-923e-4d75-92c1-d6946b44526d","html_url":"https://github.com/jorgegorka/svelte-router","commit_stats":{"total_commits":200,"total_committers":15,"mean_commits":"13.333333333333334","dds":"0.19499999999999995","last_synced_commit":"48018cba7bf8bc9eb3a294936bf97ad4813e03cf"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/jorgegorka/svelte-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgegorka%2Fsvelte-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgegorka%2Fsvelte-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgegorka%2Fsvelte-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgegorka%2Fsvelte-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jorgegorka","download_url":"https://codeload.github.com/jorgegorka/svelte-router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgegorka%2Fsvelte-router/sbom","scorecard":{"id":532906,"data":{"date":"2025-08-11","repo":{"name":"github.com/jorgegorka/svelte-router","commit":"a282abf7070d8215f4d86523b008cc9e7e333574"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":1,"reason":"Found 3/17 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T06:10:17.273Z","repository_id":40613948,"created_at":"2025-08-20T06:10:17.274Z","updated_at":"2025-08-20T06:10:17.274Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28784093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T13:55:28.044Z","status":"ssl_error","status_checked_at":"2026-01-26T13:55:26.068Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hacktoberfest","javascript","router","svelte"],"created_at":"2024-08-03T01:01:33.158Z","updated_at":"2026-01-26T18:09:13.632Z","avatar_url":"https://github.com/jorgegorka.png","language":"JavaScript","funding_links":[],"categories":["components and libraries","Routers"],"sub_categories":["routers","Internationalization","Internationalisation"],"readme":"# Svelte Router SPA\n\n![version](https://img.shields.io/npm/v/svelte-router-spa.svg)\n![license](https://img.shields.io/github/license/jorgegorka/svelte-router.svg)\n![Code climate](https://img.shields.io/codeclimate/maintainability/jorgegorka/svelte-router.svg)\n\n## What is Svelte Router SPA\n\nSvelte Router adds routing to your Svelte apps. It keeps your routes organized in a single place.\n\nWith Svelte Router SPA you have all the features you need to create modern web applications with minimal configuration.\n\nIt's designed for Single Page Applications (SPA). If you need Server Side Rendering then consider using [Svelte Kit](https://kit.svelte.dev/).\n\n## -- Svelte Router SPA is feature complete. No new features will be added, only bugfixes will be solved --.\n\n## Index\n\n* [Features](#features)\n* [Install](#install)\n* [Usage](#usage)\n  * [Layouts and route info](#layouts-and-route-info)\n  * [Anatomy of a route](#anatomy-of-a-route)\n  * [Using named params as first part of path name (not recommended)](#using-named-params-as-first-part-of-path-name-not-recommended)\n* [Route prefix](#route-prefix)\n* [Localisation](#localisation)\n  * [Rendering a page in different languages](#rendering-a-page-in-different-languages)\n* [Google Analytics](#google-analytics)\n* [Not Found - 404](#not-found---404)\n* [API](#api)\n  * [Router](#router)\n  * [Route](#route)\n  * [currentRoute](#currentroute)\n  * [Navigate](#navigate)\n  * [navigateTo](#navigateto)\n  * [routeIsActive](#routeisactive)\n  * [localisedRoute](#localisedroute)\n* [Example of use](#example-of-use)\n* [Credits](#credits)\n\n## Features\n\n- Define your routes in a single interface\n- Layouts global, per page or nested.\n- Nested routes.\n- Named params.\n- Localisation.\n- Guards to protect urls. Public and private urls.\n- Route prefix.\n- Track pageviews in Google Analytics (optional).\n- Use standard `\u003ca href=\"/about-us\"\u003eAbout\u003c/a\u003e` elements to navigate between pages (or use [`\u003cNavigate /\u003e`](#navigate) for bonus features).\n\nSvelte Router is smart enought to inject the corresponding params to each Route component. Every Route component has information about their named params, query params and child route.\n\nYou can use all that information (availabe in the currentRoute property) to help you implement your business logic and secure the app.\n\n## Install\n\nTo install Svelte Router on your svelte app:\n\nwith npm\n\n```bash\nnpm i svelte-router-spa\n```\n\nwith Yarn\n\n```bash\nyarn add svelte-router-spa\n```\n\n## Usage\n\nEnsure your local server is configured in SPA mode. In a default Svelte installation you need to edit your package.json and add _-s_ to `sirv public`.\n\n```javascript\n\"start\": \"sirv public -s\"\n```\n\nInstead of having your routes spread inside your code Svelte Router SPA lets you define them inside a file where you can easily identify all available routes.\n\nAdd a routes.js file with your routes info. Example:\n\n```javascript\nimport Login from './views/public/login.svelte'\nimport PublicIndex from './views/public/index.svelte'\nimport PublicLayout from './views/public/layout.svelte'\nimport AdminLayout from './views/admin/layout.svelte'\nimport AdminIndex from './views/admin/index.svelte'\nimport EmployeesIndex from './views/admin/employees/index.svelte'\n\nfunction userIsAdmin() {\n  //check if user is admin and returns true or false\n}\n\nconst routes = [\n  {\n    name: '/',\n    component: PublicLayout,\n  },\n  { name: 'login', component: Login, layout: PublicLayout },\n  {\n    name: 'admin',\n    component: AdminLayout,\n    onlyIf: { guard: userIsAdmin, redirect: '/login' },\n    nestedRoutes: [\n      { name: 'index', component: AdminIndex },\n      {\n        name: 'employees',\n        component: '',\n        nestedRoutes: [\n          { name: 'index', component: EmployeesIndex },\n          { name: 'show/:id', component: EmployeesShow },\n        ],\n      },\n    ],\n  },\n]\n\nexport { routes }\n```\n\nImport the routes into your main component (probably App.svelte)\n\n```javascript\n\u003cscript\u003e\n  import { Router } from 'svelte-router-spa'\n  import { routes } from './routes'\n\u003c/script\u003e\n\n\u003cRouter {routes} /\u003e\n```\n\nThat's all\n\n### Layouts and route info\n\nEvery Route file will receive a currentRoute property with information about the current route, params, queries, etc.\n\nYou can add any number of layouts nested inside Router. For instance assuming that I want two layouts one for public pages and the other for private admin pages I would create these two files:\n\nFilename: _public_layout.svelte_\n\n```javascript\n\u003cscript\u003e\n  import { Route } from 'svelte-router-spa'\n  import TopHeader from './top_header.svelte'\n  export let currentRoute\n  const params = {}\n\u003c/script\u003e\n\n\u003cdiv class=\"app\"\u003e\n  \u003cTopHeader /\u003e\n  \u003csection class=\"section\"\u003e\n    \u003cRoute {currentRoute}  {params} /\u003e\n  \u003c/section\u003e\n\u003c/div\u003e\n```\n\nFilename: _admin_layout.svelte_\n\n```javascript\n\u003cscript\u003e\n  import { Route } from \"svelte-router-spa\";\n\n  export let currentRoute;\n  const params = {}\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  \u003ch1\u003eAdmin Layout\u003c/h1\u003e\n  \u003cRoute {currentRoute} {params} /\u003e\n\u003c/div\u003e\n```\n\nThe route page will take care of rendering the appropriate component inside the layout. It will also pass a property called _currentRoute_ to the component with information about the route, nested and query params.\n\n**Tip:** You can have any number of layouts and you can nest them into each other as much as you want. Just remember to add a _Route_ component where the content should be rendered inside the layout.\n\n**Tip:** The _Route_ component will pass a property to the rendered component named _currentRoute_ with information about the current route, params, queries, etc.\n\n### Anatomy of a route\n\nEach route is an object that may have the following properties:\n\n```javascript\n\nfunction userIsAdmin() {\n  // return true or false\n}\n\n\n{\n  name: 'about-us',\n  component: About,\n  layout: PublicLayout,\n  redirectTo: 'company',\n  onlyIf: { guard: userIsAdmin, redirect: '/login' },\n  lang: { es: 'acerca-de' },\n  nestedRoutes: [\n    { name: 'our-values', component: CompanyValues, lang: { es: 'nuestros-valores' } }\n  ]\n}\n\n```\n\n**name (required)**: The name that will be used in the url. This is the default name for the route if no localisation is defined or no language is set.\n\n**component (required if no layout is present)**: A component that will be rendered when this route is active. If the route has nestedRoutes the component should be a Layout.\n\n**layout (required if no component is present)**: A component that acts as a layout (a container for other child components).\n\n_Either a component or a layout should be specified. Both can not be empty._\n\n**nestedRoutes**: An array of routes.\n\n**redirectTo**: A url or pathname (https://yourwebsite.com) or (/my-product).\n\n**onlyIf**: An object to conditionally render a route. If guard returns true then route is rendered. If guard is false it redirects to _redirect_.\n\n**lang**: An object with route names localised. Check [Localisation](#localisation)\n\nRoutes can contain as many nested routes as needed.\n\nThey can also contain as many layouts as needed. Layouts can be nested into other layouts.\n\nIn the following example both the home root ('/' and 'login' will use the same layout). Admin, employees and employeesShow will use the admin layout and employees will also use the employees layout, rendered inside the admin layout.\n\nExample of routes:\n\n```javascript\nconst routes = [\n  {\n    name: '/',\n    component: PublicIndex,\n    layout: PublicLayout,\n  },\n  { name: 'login', component: Login, layout: PublicLayout },\n  {\n    name: 'admin',\n    component: AdminIndex,\n    layout: AdminLayout,\n    nestedRoutes: [\n      {\n        name: 'employees',\n        component: EmployeesIndex,\n        nestedRoutes: [\n          {\n            name: 'show/:id',\n            component: EmployeesShowLayout,\n            nestedRoutes: [\n              { name: 'index', component: EmployeesShow },\n              { name: 'list', component: EmployeesShowList },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n]\n```\n\nThe routes that this file will parse successfully are:\n\n```\n/\n/login\n/admin\n/admin/employees\n/admin/employees/show\n/admin/employees/show/{id}\n/admin/employees/show/{id}/list\n```\n\n### Using named params as first part of path name (not recommended)\n\nSvelte Router is usually smart enough to find the right route for you. It means that you don't need to care about the order in which you write your routes. There is an exception to this rule: If you define a named param as the very first part of the path like: /:user-name/edit\n\nIn this specific case order matters and you should add that route **after** all other routes.\n\nThis is not recommended and you should always start your routes with a static path name. You can add as many named params as you need after the first static name.\n\n```javascript\n\nfunction userIsAdmin() {\n  // return true or false\n}\n\n\n{\n  name: 'about-us',\n  component: About,\n  lang: { es: 'acerca-de' },\n  nestedRoutes: [\n    {\n      name: 'our-values', component: CompanyValues, lang: { es: 'nuestros-valores' }\n    }\n  ]\n},\n{\n  name: '/',\n  component: HomeComponent\n},\n{\n  name: '/project/:name',\n  component: ProjectComponent\n},\n{\n  name: '/:user-name/edit',\n  component: EditUserComponent\n}\n\n```\n\n## API\n\n### Router\n\n`import { Router } from 'svelte-router-spa'`\n\nThis is the main component that needs to be included before any other content as it holds information about your routes and which route should be rendered.\n\nThe simplest approach (although not required) is to have an App.svelte file like this:\n\n```javascript\n\u003cscript\u003e\n  import { Router } from 'svelte-router-spa'\n  import { routes } from './routes'\n\n  let options = { gaPageviews: true}\n\u003c/script\u003e\n\n\u003cRouter {routes} {options} /\u003e\n```\n\nThe layout and/or the component that matches the active route will be rendered inside _Router_.\n\nOptions is an object that supports three properties:\n\n_gaPageviews_ that will record route changes as pageviews in Google Analytics. It's disabled by default.\n\n_lang_ a string that sets the language that the router will use to match the active route. Check [Localisation](#localisation)\n\n_defaultLanguage_ If no language is set the active route will return this value as the active language.\n\n### Route\n\n`import { Route } from 'svelte-router-spa'`\n\nThis component is only needed if you create a layout. It will take care of rendering the content for the child components or child layouts recursively. You can have as many nested layouts as you need.\n\nThe info about the current route will be received as a property so you need to define _currentRoute_ and export it.\n\nIt will also accept an object called named _params_ where you can send any aditional params to the rendered component. This is usefull if you add any logic in your template, to check user's permission for instance, and want to send extra info to the rendered component.\n\ncurrentRoute has all the information about the current route and the child routes.\n\nRoute is smart enough to expose the named params in the route component where they will be rendered.\n\nExample:\n\n```javascript\n\u003cscript\u003e\n  import { Route } from 'svelte-router-spa'\n  import TopHeader from './top_header.svelte'\n  import FooterContent from './footer_content.svelte'\n  export let currentRoute\n\n  const params = { validCheck: true }\n\u003c/script\u003e\n\n\u003cdiv class=\"app\"\u003e\n  \u003cTopHeader /\u003e\n  \u003csection class=\"section\"\u003e\n    \u003cRoute {currentRoute} {params} /\u003e\n    \u003cp\u003eRoute params are: {currentRoute.namedParams} and {currentRoute.queryParams}\u003c/p\u003e\n  \u003c/section\u003e\n  \u003cFooterContent /\u003e\n\u003c/div\u003e\n```\n\n### currentRoute\n\nThis object is propagated from _Route_ to the components it renders. It contains information about the current route and the child routes.\n\nThese are the properties available in this object:\n\n- name\n- component\n- layout\n- queryParams\n- namedParams\n- childRoute\n- language\n\n**Example:**\n\n```javascript\nconst routes = [\n  {\n    name: '/public',\n    component: PublicLayout,\n    nestedRoutes: [\n      {\n        name: 'about-us',\n        component: 'AboutUsLayout',\n        nestedRoutes: [\n          { name: 'company', component: CompanyPage },\n          { name: 'people', component: PeoplePage },\n        ],\n      },\n    ],\n  },\n]\n```\n\nThat configuration will parse correctly the following routes:\n\n```javascript\n/public\n/public/about-us\n/public/about-us/company\n/public/about-us/people/:name\n```\n\nIf the user visits /public/about-us/people/jack the following components will be rendered:\n\n```\nRouter -\u003e PublicLayout(Route) -\u003e AboutUsLayout(Route) -\u003e PeoplePage\n```\n\nInside PeoplePage you can get all the information about the current route like this:\n\n```javascript\n\u003cscript\u003e\n  export let currentRoute\n\u003c/script\u003e\n\n\u003ch1\u003eYour name is: {currentRoute.namedParams.name}\u003c/h1\u003e\n```\n\nThis will render:\n\n```html\n\u003ch1\u003eYour name is: Jack\u003c/h1\u003e\n```\n\n### Navigate\n\n`import { Navigate } from 'svelte-router-spa'`\n\n#### params\n\n- **to** (Required) String A valid route to navigate to.\n- **title** (Optional) String A title for the _a_ element.\n- **styles** (Optional) String Class styles to be applied to the _a class_ element.\n- **lang** (Optional) String A language to convert the route to.\n\nNavigate is a wrapper around the \u003c a href=\"\" \u003e element to help you generate links quick and easily.\n\nIt adds an _active_ class to the styles if the generated route is the active one.\n\nCheck **navigateTo** belown for more information about the language param.\n\nExample:\n\n```javascript\n\u003cscript\u003e\n  import { Navigate } from 'svelte-router-spa'\n\u003c/script\u003e\n\n\u003cdiv class=\"app\"\u003e\n  \u003ch1\u003eMy content\u003c/h1\u003e\n  \u003cp\u003eNow I want to generate a \u003cNavigate to=\"admin/employees\"\u003elink to /admin/employees\u003c/Navigate\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### navigateTo\n\n`import { navigateTo } from 'svelte-router-spa'`\n\n#### params\n\n- **route name** (Required) String A valid route to navigate to.\n- **language** (Optional) String A language to convert the route to.\n\nnavigateTo allows you to programatically navigate to a route from inside your app updating the browser url and history.\n\nnavigateTo receives a route name as a param and an optional language and will try to navigate to that route.\n\nWhen a language is provided _navigateTo_ will try to convert the _route name_ to the localised version of the route.\n\n```javascript\n  // Example route\n  {\n    name: '/setup',\n    component: 'SetupComponent',\n    lang: { es: 'configuracion' }\n  }\n```\n\n```javascript\nnavigateTo('setup') // Will redirect to /setup\n\nnavigateTo('setup', 'es') // Will redirect to /configuracion\n```\n\n### routeIsActive\n\n`import { routeIsActive } from 'svelte-router-spa'`\n\nReturns a boolean indicating if the path is the current active route.\n\nThis is useful, for instance to set an _active_ class on a menu.\n\n#### Params\n\n- **pathName** (required): A string with the path that you want to check.\n- **includePath** (optional | default is _false_): A boolean indicating if pathName should match exactly the current route or if it should be included.\n\nThe [Navigate](https://github.com/jorgegorka/svelte-router/blob/master/README.md#navigate) component does this automatically and adds an _active_ class if the generated route is the active one. Navigate sets _includePath_ to false\n\nExample:\n\n```javascript\n\u003cscript\u003e\n  import { routeIsActive } from 'svelte-router-spa'\n\u003c/script\u003e\n\n\u003ca href=\"/contact-us\" class:active={routeIsActive('/contact-us')}\u003e\n  Say hello\n\u003c/a\u003e\n\n// If current route is /admin/companies/show/my-company\n\nrouteIsActive('admin') // returns false\nrouteIsActive('show/my-company') // returns false\nrouteIsActive('admin/companies/show/my-company') // returns true\nrouteIsActive('admin', true) // returns true\nrouteIsActive('show/my-company', true) // returns true\nrouteIsActive('my-company', true) // returns true\nrouteIsActive('other-company', true) // returns false\n```\n\nIf _includePath_ is true and the current route is `/admin/companies/show/my-company`\n\n### localisedRoute\n\n`import { localisedRoute } from 'svelte-router-spa'`\n\n#### params\n\n- **route name** (Required) String A valid route to navigate to.\n- **language** (Required) String A language to convert the route to.\n\nlocalisedRoute returns a string with the route localised to the specified language.\n\n```javascript\n  // Example route\n  {\n    name: '/setup',\n    component: 'SetupComponent',\n    lang: { es: 'configuracion', it: 'configurazione' }\n  }\n```\n\n```javascript\nlocalisedRoute('setup', 'es') // Will return the string \"/configuracion\"\n\nlocalisedRoute('setup', 'it') // Will return the string \"/configurazione\"\n```\n\n### Not Found - 404\n\n#### Default behaviour\n\nSvelte Router redirects to a 404.html page if a route is not found. Most hosting providers support this configuration and will serve a 404.html page automatically for not found pages. Just add a 404.html page in the same directory where your index.html file is.\n\n#### Custom behaviour\n\nIf you define a 404 route it will be rendered instead of the default behaviour.\n\n```javascript\n  // Example of a custom 404 route\n  {\n    name: '404',\n    path: '404',\n    component: MyCustomNotFoundcomponent\n  }\n```\n\n## Route prefix\n\nYou can easily constrain all your routes to a specific path like _/blog_\n\n```javascript\n\u003cRouter { routes } options={ {prefix: 'blog'} } /\u003e\n```\n\nWith this option you don't have to define all your routes starting with _blog_ they will be prefixed automatically.\n\nUsing prefix has two advantages:\n\n- You don't need to create a top level route in your routes file and then add every route as a nested route.\n- Routes that don't start with the prefix will not be returned as 404 since they are out of the scope of the prefixed routes so you can navigate to them.\n\n## Google Analytics\n\nIf you want to track route changes as pageviews in Google Analytics just add\n\n```javascript\n\u003cRouter { routes } options={ {gaPageviews: true} } /\u003e\n```\n\n## Localisation\n\nHow localisation works depends on the _lang_ param being passed to the _Router_ component. If a language is specified the router will try to match a route in that language only. If no language is specified then the router will try to find a route in any language available.\n\n```javascript\n  const options = { lang: 'de' }\n\n  \u003cRouter {routes} {options} /\u003e\n```\n\nLet's see some examples using the following routes.\n\n```javascript\nconst routes = [\n  {\n    name: '/',\n    component: PublicIndex,\n  },\n  { name: 'login', component: Login, lang: { es: 'iniciar-sesion' } },\n  { name: 'signup', component: SignUp, lang: { es: 'registrarse' } },\n  {\n    name: 'admin',\n    component: AdminIndex,\n    lang: { es: 'administrador' },\n    nestedRoutes: [\n      {\n        name: 'employees',\n        component: EmployeesIndex,\n        lang: { es: 'empleados' },\n        nestedRoutes: [\n          {\n            name: 'show/:id',\n            component: ShowEmployeeLayout,\n            lang: { es: 'mostrar/:id' },\n            nestedRoutes: [\n              {\n                name: 'index',\n                component: ShowEmployee,\n              },\n              {\n                name: 'calendar/:month',\n                component: CalendarEmployee,\n                lang: { es: 'calendario/:month', de: 'kalender/:month' },\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n]\n```\n\nIf we don't specify a language the following routes are valid:\n\n`/login`\n\n`/setup`\n\n`/admin/employees`\n\n`/admin/employees/show/123`\n\n`/admin/employees/show/123/calendar/june`\n\n`/iniciar-sesion`\n\n`/registrarse`\n\n`/administrador/empleados`\n\n`/administrador/empleados/mostrar/123`\n\n`/administrador/empleados/mostrar/123/calendario/junio`\n\nIf we specify a language the router will try to find routes **only** in that language so if in our current example we set the _lang_ variable to _'es'_ these routes will be **invalid** and the router will return a 404 page:\n\n`/login`\n\n`/setup`\n\n`/admin/employees`\n\n`/admin/employees/show/123`\n\n`/admin/employees/show/123/calendar/june`\n\nHowever these other routes will be **valid**:\n\n`/iniciar-sesion`\n\n`/registrarse`\n\n`/administrador/empleados`\n\n`/administrador/empleados/mostrar/123`\n\n`/administrador/empleados/mostrar/123/calendario/junio`\n\n_currentRoute_ will return the language of the matched route.\n\nAnother example: In the routes above there is only one german localised route for _calendar_ so this url will be valid:\n\n`/admin/employees/show/123/kalender/april`\n\nThe router will match the default route for all paths that are not localised and will match the german one for the one that specfies a localisation.\n\nThat route will set **'de'** as the language in _currentRoute_\n\n### Rendering a page in different languages\n\nIf you use _Navigate_ and _navigateTo_ to generate links and navigate to different parts of your application an automatic language conversion will be done for you.\n\nBoth _Navigate_ and _navigateTo_ support an aditional parameter with a language. If a language is provided they will try to convert the default route into the corresponding one for that language.\n\nExample:\n\n```javascript\n  // Example route\n  {\n    name: '/setup',\n    component: 'SetupComponent',\n    lang: { es: 'configuracion' }\n  }\n```\n\n```javascript\nnavigateTo('setup') // Will redirect to /setup\n\nnavigateTo('setup', 'es') // Will redirect to /configuracion\n```\n\nThere is also available a function called _localisedRoute_ that will return a string with the translated route, in case you want the translation but not navigating to the route.\n\nThe router options accept a property called _defaultLanguage_ This value will be returned by the activeRoute object if there is no language selected.\n\n### Example of use\n\n[Demanda](https://github.com/jorgegorka/demanda) is an open source e-commerce application made with Ruby on Rails for the backend and Svelte for the frontend.  It is a [very good example](https://github.com/jorgegorka/demanda/tree/master/frontend/src/lib/routes) of how to use Svelte Router SPA.\n\n## Credits\n\nSvelte Router has been developed by [Jorge Alvarez](https://www.alvareznavarro.es)\n\n### Contributors\n\n[Mark Kopenga](https://github.com/mjarkk)\n\n[Fidel Ramos](https://github.com/haplo)\n\n[Steve Phillips](https://github.com/elimisteve)\n\n[David McCrea](https://github.com/davemccrea)\n\n[Pascal Clanget](https://github.com/Gh05d)\n\n[A J](https://github.com/aj-nk)\n\n[David Kiss](https://github.com/xdavidkissx)\n\n[Common Creator](https://github.com/CommonCreator)\n\n[SianLoong](https://github.com/si3nloong)\n\n[Frippertronics](https://github.com/frippertronics)\n\n[CHamalainen](https://github.com/CHamalainen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgegorka%2Fsvelte-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorgegorka%2Fsvelte-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgegorka%2Fsvelte-router/lists"}