A declarative Svelte routing library with SSR support.
Look at the example folder for an example project setup.
npm install --save svelte-routing
<!-- App.svelte -->HomeAboutBlog
// main.js;const app =target: documenthydrate: true;
// server.jsconst createServer = ;const app = ;;
Router component supplies the
Route descendant components with routing information through context, so you need at least one
Router at the top of your application. It assigns a score to all its
Route descendants and picks the best match to render.
Router components can also be nested to allow for seamless merging of many smaller apps.
A component used to navigate around the application.
||URL the component should link to.|
||An object that will be pushed to the history stack when the
||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
A component that will render its
component property or children when its ancestor
Router component decides it is the best match.
All properties other than
component given to the
Route will be 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 the wildcard string as the
wildcardName property instead of as the
Potential path parameters are passed back to the parent using props, so they can be exposed to the slot template using
||The path for when this component should be rendered. If no
||The component constructor that will be used for rendering when the
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
state property equivalent to those in the
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 of adding a new one.
HomeReplace this URL<!-- ... -->
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 to replace the current entry in the history stack instead of adding a new one. You can add an attribute
noroute for this action to skip over the anchor and allow it to use the native browser action.
<!-- App.svelte -->HomeReplace this URLUse the native action<!-- ... -->
In the browser we wait until all child
Route components have registered with their ancestor
Router component before we let the
Router pick the best match. This approach is not possible on the server, because when all
Route components have registered and it is time to pick a match the SSR has already completed, and a document with no matching route will be returned.
We therefore resort to picking the first matching
Route that is registered on the server, so it is of utmost importance that you
sort your Route components from the most specific to the least specific if you are using SSR.