simple-svelte-router v1.0.4

simple-svelte-router

simple-svelte-router is light weight, fast, easy-to-use router for svelte

Note: simple-svelte-router re-render the page instead of re-loading the resources

usage

Router

this the Router Component to use this module

the Router Component takes a routes parameter

with the this type Routes

interface Route {
  Component: svelte.Component, // the Component you want to use
  path: string, // the url you want to use this Component in
  redirect: () => string // an optional function if you want to redirect to a certain url instead of rendering a Component
}
type Routes = Route[];

Import:

1. set path to ** for unknown (404) urls
2. set path to / for the main entry-point
3. set redirect property if you want to redirect to another url

<script>
  import { Router } from "simple-svelte-router";
  import MainComponent from "./MainComponent.svelte";
  import ArticleComponent from "./ArticleComponent.svelte"
  import NotFoundComponent from "./NotFoundComponent.svelte"
  

  let routes = [
    {
      Component: NotFoundComponent,
      path: "**" // use ** for unknown (404) urls
    },
    {
      Component: MainComponent,
      path: "/" // use / for the main entry point
    },
    {
      Component: ArticleComponent,
      path: "/article/:id" // use : before any url-param you want to use
    },
    {
      path: "/someUrlToRedirect",
      redirect: () => "/someUrl" // use redirect to redirect to another url
    }
  ]

  <Router {routes}/>
</script>

redirect

this is a function to redirect to another url

for example:

<script>
  import { redirect } from "simple-svelte-router";

  // sets a timeout that will to redirect to /
  // after a 1s
  setTimeOut(() => redirect("/"), 1000);
</script>

Link

Link is a Component for you to use instead of a tags

example:

<Link to="/someUrl">go to /someUrl</Link>

installation

with npm:

npm i simple-svelte-router

with yarn:

yarn add simple-svelte-router