svelte-yet-another-router
Getting started
This Svelte router has a simple API with a total of only five components. The two most important ones are the Route
and the Link
components. The purpose of the Route
component is to conditionally render its children based on the current location. The purpose of the Link
component is to provide clickable links which doesn't reload the entire page from the server but instead casues Svelte to update the application and it's Route
components based on the Link
's target.
<script>
import { Link, Route, Switch, pathBase, push } from 'svelte-yet-another-router';
// If your app is published in a subfolder, you can set the path base to make all
// <Route>s, <Link>s and <Redirect>s automatically work with you path base.
pathBase.set('/base');
</script>
<h1>My app!</h1>
<Route path="/">
<p>This is the home page. Why don't you visit <Link href="/page1">another page</Link>? Or <Link href="page2">yet another</Link>?
<Link href="/page3">This link</Link> will take you right back to the start.
</Route>
<Switch>
<Route path="/page1">
<p>Another page!</p>
</Route>
<Route path="/page2">
<p>Yet another page!</p>
</Route>
<!-- The $push store allows you to push a URI (and corresponding state to the browser history -->
<Route path="/page3" on:match={() => $push('/')}>
<p>Going home!</p>
</Route>
<Route path="/" exact={false}>
<p>404: Unknown page!</p>
</Route>
</Switch>
Additionally, the Redirect
and ExternalRedirect
components are available, which will redirect the user to the provided target whenever it is rendered. The difference is that the Redirect
component will only redirect within the same application by triggering Svelte to update the rendering while ExternalRedirect
will simply change the browser's location to whichever URL is provided.
Finally, a Switch
component is available. Among the first level of Route
components contained within a Switch
component, only the first one with a matching path is
rendered. This, among other things, allows for the construction of "catch all" routes for handling unknown paths.