A declarative Svelte routing library with SSR support
npm install svelte-routing[![npm][npm]][npm-url]
A declarative Svelte routing library with SSR support.
[[CHANGELOG][changelog-url]]
``bash`
npm i -D svelte-routing
`html
`
`javascript
// main.js
import App from "./App.svelte";
const app = new App({
target: document.getElementById("app"),
});
`
#### Router
The Router component supplies the Link and Route descendant componentsRouter
with routing information through context, so you need at least one atRoute
the top of your application. It assigns a score to all its descendants
and picks the best match to render.
Router components can also be nested to allow for seamless merging of many
smaller apps.
###### Properties
| Property | Required | Default Value | Description |
| :--------------: | :------: | :-----------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| basepath | | "/" | The basepath property will be added to all the to properties of Link descendants and to all path properties of Route descendants. 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. |url
| | | "" | 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. |viewtransition
| | | null | View Transition (Experimental) |
#### Link
A component used to navigate around the application.
###### Properties
| Property | Required | Default Value | Description |
| :--------------: | :------: | :-----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| to | ✔ ️ | "#" | URL the component should link to. |replace
| | | false | When true, clicking the Link will replace the current entry in the history stack instead of adding a new one. |state
| | | {} | An object that will be pushed to the history stack when the Link is clicked. |getProps
| | | () => ({}) | 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. |preserveScroll
| | | false | When true, clicking the Link will not scroll the page to the top. |
#### Route
A component that will render its component property or children when itsRouter
ancestor component decides it is the best match.
All properties other than path and component given to the Route will becomponent
passed to the rendered .
Potential path parameters will be passed to the rendered component as
properties. A wildcard can be given a name with wildcardName to pass thewildcardName
wildcard string as the property instead of as the * property.
Potential path parameters are passed back to the parent using props, so they can
be exposed to the slot template using let:params.
`html`
The active status of link can be exposed to the slot template using
let:active.
`html`
###### Properties
| Property | Required | Default Value | Description |
| :---------: | :------: | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| path | | "" | 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. |component
| | | 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. |
#### navigate
A function that allows you to imperatively navigate around the application for
those use cases where a Link component is not suitable, e.g. after submitting
a form.
The first argument is a string denoting where to navigate to, and the second
argument is an object with a replace, state and preserveScroll properties equivalent to thoseLink
in the component.
`html`
#### link
An action used on anchor tags to navigate around the application. You can add an
attribute replace to replace the current entry in the history stack instead ofpreserveScroll
adding a new one and to not scroll the page to the top when clicked.
`html
#### links
An action used on a root element to make all relative anchor elements navigate
around the application. You can add an attribute replace on any anchor topreserveScroll
replace the current entry in the history stack instead of adding a new one.
You can add an attribute on any anchor to not to scroll the page to the top when clicked. Younoroute
can add an attribute for this action to skip over the anchor and allow
it to use the native browser action.
`html
####
Viewtransition for navigation (Experimental).
_
_`html
`_
_`html
scale:${t};transform-origin:center center; }}"
>
``This project is licensed under the MIT.
Unless you explicitly state otherwise, any contribution intentionally submitted
for this project by you, shall be licensed as MIT, without any additional
terms or conditions. Code of Conduct.
[npm]: https://img.shields.io/npm/v/svelte-routing.svg
[npm-url]: https://npmjs.com/package/svelte-routing
[changelog-url]: https://github.com/EmilTholin/svelte-routing/blob/master/CHANGELOG.md