Router.svelte.<!-- App.svelte -->
<Route path="/" component={() => import("./Home.svelte")} />
<Route path="/about" component={() => import("./About.svelte")} />
<Route path="/user/:user" component={() => import("./User.svelte")} />
useLocation, useRouter, useHistory.<!-- Page.svelte -->
<script>
import { useLocation } from "svelte-routing";
const location = useLocation();
</script>
<div>{JSON.stringify($location)}</div>
Added TypeScript support.
Added functionality for passing the location to the rendered Route component
and slot.
<!-- App.svelte -->
<Route path="/blog" component="{Blog}" />
<!-- Blog.svelte -->
<script>
import queryString from "query-string";
export let location;
let queryParams;
$: queryParams = queryString.parse(location.search);
</script>
<h1>Blog</h1>
<p>{queryParams.foo}</p>
<!-- App.svelte -->
<Route path="/blog" let:location>
<h1>Blog</h1>
<p>{location.search}</p>
</Route>
Added functionality to pass potential Route path parameters back to the parent
using props, so they can be exposed to the slot template using let:params.
<Route path="/blog/:id" let:params>
<BlogPost id="{params.id}" />
</Route>
Added functionality for passing all the extra Route properties to the rendered
component.
<!-- App.svelte -->
<Route path="/page" component="{Page}" foo="foo" bar="bar" />
<!-- Page.svelte -->
<script>
export let foo;
export let bar;
</script>
<h1>{foo} {bar}</h1>
Added the ability to give Route path wildcards a custom name.
<!-- App.svelte -->
<Route path="/page/*wildcardName" component="{Page}" />
<!-- Page.svelte -->
<script>
export let wildcardName;
</script>
<h1>{wildcardName}</h1>
Route and Link components to have a RouterNavLink was removed in favour for a more versatile Link component. CheckNavLink component in the example directory for an example.history library. You can compile a separate CJS bundleurl property for the Router, which will force the URL for all.svelte.src/index.js file,import { Router, Route, Link } from "svelte-routing";
Moved to Svelte v2 and added the new
link and
links actions.
Split the createHistory function into createBrowserHistory,
createMemoryHistory, createHashHistory to allow for better tree shaking of
unused history creation code.
Added the ability to access the match object in a matched route:
<!-- App.html -->
<Route path="/:myParam" bind:match>
<h1>{{match && match.params.myParam}}</h1>
</Route>
or:
<!-- App.html -->
<Route path="/:myParam" component="{{MyComponent}}" />
<!-- MyComponent.html -->
<h1>{{match.params.myParam}}</h1>
Added the ability to give a component constructor to a route with the
component property:
<!-- App.html -->
<Route path="/:myParam" component="{{MyComponent}}" />