first working router 🎉

src/App.svelte

@@ -1,4 +1,7 @@
 <script>
+  import Router from "svelte-spa-router";
+  import { replace } from "svelte-spa-router";
+  import { wrap } from "svelte-spa-router/wrap";
   import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
   import en from "./locales/en";
   import de from "./locales/de";
@@ -12,17 +15,39 @@
   import Login from "./components/Login.svelte";
   import Dashboard from "./components/Dashboard.svelte";
   import Footer from "./components/Footer.svelte";
+  import NotFound from "./components/NotFound.svelte";
   import Tracks from "./components/Tracks.svelte";
   // import Profile from "./components/Profile.svelte";
   import store from "./store.js";
+  import ForgotPassword from "./components/ForgotPassword.svelte";
   store.init();
   $: logged_in = $store.isLoggedIn;
+  //
+  const checkAuth = (detail) => {
+    if (!$store.isLoggedIn) {
+      console.log("not authed");
+      replace("/login/");
+      return false;
+    }
+    return true;
+  };
+  const routes = {
+    "/login": Login,
+    "/forgot_password": ForgotPassword,
+    "/dashboard": wrap({ component: Dashboard, conditions: [checkAuth] }),
+    "/": wrap({ component: Dashboard, conditions: [checkAuth] }),
+
+    // Using named parameters, with last being optional
+    // "/author/:first/:last?": Author,
+
+    // Wildcard parameter
+    // "/book/*": Book,
+
+    // Catch-all
+    // This is optional, but if present it must be the last
+    "*": NotFound,
+  };
+  //
 </script>
 
-{#if logged_in === true}
-  <Dashboard />
-  <Footer />
-  <!-- <Profile /> -->
-{:else}
-  <Login />
-{/if}
+<Router {routes} />