✈ This is svroutes!

⚠ This module is made for Svelte, not SvelteKit.

svroutes is an extension for Svelte to add SPA applications.

🖊 How do I use svroutes?

svroutes is fairly easy to use.

In your main svelte file (usually App.svelte), place a Router object. Within the Router object, you can place Route objects. It works pretty similarly to react-router.

📩 Installation

To install svroutes, run npm install svroutes. Simple as that. Now you can begin using svroutes!

🌎 Router object usage:

home (default '/')

Controls the base URL. All Route object paths will be {home}/{route_path}.

🌍 Route object usage:

path (default '/')

Controls the path for this route. Value will be converted to a RegExp unless the text property is present.

Paths can have special parameters using the :paramsName syntax. Wildcards can be created using the .* syntax. Read component (below) for how to access.

component (default null)

Component to display on screen when the user is on the current path. The component will be created with a params and wildcards property, meaning you can use

export let params;
export let wildcards;

to gain access to them.

If you don't pass in a component and instead decide to place it as a descendant of the Route object, you can use let:params.

<Route path='/hello/:userName' let:params>
    <h1>Hello, {params.userName}!</h1>
</Route>

exact (default false)

Decides whether there should be a '^' prepended and '$' appended to the RegExp. In text mode, this property is useless.

text (default false)

Controls whether the path property should be a string or RegExp. In text mode, you cannot use custom options or wildcards. (:customOption).

index (default false)

If enabled, path is ignored and this route will always show if others fail. Must be placed below all other routes to prevent errors.

🌏 Link object usage:

href or to (default '/')

Path to go to. Using Link will automatically update the page without need for reload. Using an anchor tag (a) will work, but is less optimized.

state (default 'history.state')

State to be passed when switching pages. You can access this via history.state.

replace (default false)

Decides whether using the link replace or pushes the state. Push means it adds to the history, while replace replaces the current one. Using replace isn't recommended for most cases because it can ruin the UX.

🚅 Navigate object usage:

The navigate object redirects the user to another page using components, rather than script.
This object uses the same options as the Link object.

⛳ Navigation via Code

To navigate between pages, you can use the navigate function.

import { navigate } from 'svroutes';
navigate(url: string, state?: any, replace?: false);

Enjoy using svroutes! Report any bugs here.