svelte-guard-history-router

svelte-guard-history-router

svelte guarded history router

Features

• Named params
• Guards to act when entering / leaving a route
• Automatic route ranking
• Routes and keys acting as stores
• Nested Routes
• Route values
• Object <=> parameter mapping
• Create links from objects
• Standart <a href="/home">Home</a> elements

usage

import { redirectGuard } from 'svelte-guard-history-router';

let session = undefined;

export const enshureSession = redirectGuard("/login", () => !session);

<script>
  import { Router, Route, Outlet } from "svelte-guard-history-router";
  import About from "./About.svelte";
  import Categories from "./Categories.svelte";
  import Category from "./Category.svelte";
  import Articles from "./Articles.svelte";
  import Article from "./Article.svelte";

  import { enshureSession } from "./main.mjs";
</script>

<Router base="/base">
<nav>
  <!-- catch all but link to '/' -->
  <Route href="/" path="*" component={Home}>Router Example</Route>
  <ul class="left">
    <li>
      <Route path="/about" component={About}>About</Route>
    </li>
    <li>
      <Route path="/article" guards={enshureSession} component={Articles}>
        Articles
        <Route path="/:artice" component={Article}/>
      </Route>
    </li>
    <li>
      <Route path="/category" guards={enshureSession} component={Categories}>
        Categories
        <Route path="/:category" component={Category}/>
      </Route>
    </li>
  </ul>
</nav>
<main>
  <Outlet/>
</main>
</Router>

Sample code

Check out the code in the example folder, or the live example.

To run the sample, clone the repository, install the dependencies, and start:

git clone https://github.com/arlac77/svelte-guard-history-router
cd svelte-guard-history-router
npm install
npm start

then navigate to localhost:5000

run tests

export BROWSER=safari|chrome|...
yarn test
or
npm test

API

Table of Contents

install

With npm do:

npm install svelte-guard-history-router

With yarn do:

yarn add svelte-guard-history-router

SPA integrating with a nginx backend

All unresolvable requests are redirected to /sericeBase/index.html

• /deploymantLocation is the location of the frontend in the servers file system
• /serviceBase is the url path as seen from the browser

location /serviceBase {
  alias /deploymantLocation;
  try_files $uri$args $uri$args/ /serviceBase/index.html;
}

license

BSD-2-Clause