Dynamic route declaration

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`.

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>