npm install --save svelters-router
yarn add svelters-router
<script>
import { Router, Route } from 'svelters-router'
import Home from './Home.svelte'
import Users from './Users.svelte'
import User from './User.svelte'
</script>
<Router>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
<Route path="/users/:id" component={User} />
<Route path="/how-to">
<h1>Hi!</h1>
<p>Routes can also have child content!</p>
</Route>
</Router>
<script>
import { Router, Route } from 'svelters-router'
import Home from './Home.svelte'
import Users from './Users.svelte'
import User from './User.svelte'
let routes = [
{
path: "/users",
component: Users
},
{
path: "/users/:id",
component: User
}
]
</script>
<Router {routes}>
<Route path="/" component={Home} />
</Router>
:bulb: Note that you can combine the two ways of declaring routes.
Route parameters are compiled by svelters-router
and given to defined component through a prop named routeParams
.
<script>
import { Router, Route } from 'svelters-router'
import Home from './Profile.svelte'
</script>
<Router>
<Route path="/organization/:organizationId/members/:memberId" component={Profile} />
</Router>
Profile.svelte
:<script>
export let routeParams
const { organizationId, memberId } = routeParams
</script>
<ul>
<li>Organization ID: {organizationId}</li>
<li>Member ID: {memberId}</li>
</ul>
<script>
import { link } from 'svelters-router'
</script>
<p>I wonder how simple it is to create a link ?</p>
<a href="/some/path" use:link>Just click here!</a>
<script>
import { Link } from 'svelters-router'
</script>
<p>I wonder how simple it is to create a link ?</p>
<Link href="/some/path">Just click here!</Link>
<script>
import { push } from 'svelters-router'
function goToTheMoon() {
// Prepare the ship
// ...
push('/moon')
}
</script>
<p>I'm a rocket man!</p>
<button on:click={goToTheMoon}>Fly me to the moon!</button>
You can display a default component when no any route matches the current location:
<script>
import { Router, Route, DefaultRoute } from 'svelters-router'
import Internet from './Internet.svelte'
import NotFound from './NotFound.svelte'
</script>
<Router>
<Route path="/world/wide/web" component={Internet} />
<DefaultRoute component={NotFound} />
</Router>
It's sometime more convenient to rely on route name instead of its path to generate links.
svelters-router
provides all the stuff you need!
<script>
import { Router, Route } from 'svelters-router'
import Home from './Home.svelte'
import Users from './Users.svelte'
import User from './User.svelte'
let routes = [
{
name: "user.show",
path: "/users/:id",
component: User
}
]
</script>
<Router {routes}>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Router>
<script>
import { Link } from 'svelters-router'
let userId = 1234
</script>
<Link name="user.show" params={{id: userId}}>See the user {userId}</Link>