From 55082e43ac349bf02ca2c67aab357addacfddaea Mon Sep 17 00:00:00 2001
From: Antoine Lelaisant <antoine.lelaisant@knplabs.com>
Date: Fri, 18 Oct 2019 23:19:16 +0200
Subject: [PATCH] Dynamic route declaration

---
 README.md                    | 30 ++++++++++++++++++++++++++++++
 src/components/Router.svelte |  6 ++++++
 2 files changed, 36 insertions(+)

diff --git a/README.md b/README.md
index d428991..7a65130 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,8 @@ yarn add svelters-router
 
 ## Usage
 
+### Declare route with Route component
+
 ```svelte
 <script>
   import { Router, Route } from 'svelters-router'
@@ -36,6 +38,34 @@ yarn add svelters-router
 </Router>
 ```
 
+### Declare route programmatically
+
+```svelte
+<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.
+
 ### Get route parameters in component
 
 Route parameters are compiled by `svelters-router` and given to defined component through a prop named `routeParams`.
diff --git a/src/components/Router.svelte b/src/components/Router.svelte
index d02d56d..6ef5ef3 100644
--- a/src/components/Router.svelte
+++ b/src/components/Router.svelte
@@ -1,7 +1,13 @@
 <script>
+  import Route from './Route.svelte'
   import { location } from '../store'
 
+  export let routes = []
+
   location.update(() => window.location)
 </script>
 
+{#each routes as route}
+  <Route path={route.path} component={route.component} />
+{/each}
 <slot></slot>