test route

index.html

@@ -13,7 +13,6 @@
 		<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
 		<script type="riot" src="./onzer.riot"></script>
-		<script type="riot" src="./playlists.riot"></script>
 
 		<script type="text/javascript">
 			async function fetch_data() {
@@ -22,26 +21,9 @@
 				});
 			}
 
-			function mountComponent(component) {
-				const app = document.getElementById('app');
-				app.innerHTML = '';
-				riot.mount(app, component);
-			}
-
 			riot.compile().then(async () => {
 				const data = await fetch_data();
-
+				riot.mount('onzer', { items: data });
-				route('/', () => {
-					riot.mount('onzer', { items: data });
-				});
-
-				route('/playlists', () => {
-					riot.mount('playlists');
-				});
-
-				router.start();
-				router.exec();
-
 			});
 		</script>
 

onzer.riot

@@ -1,4 +1,18 @@
 <onzer>
+
+    <router initial-route={state.initialRoute} base={state.base}>
+        <nav>
+            <a each={ page in state.pages } href="/#{ page.id }">
+                { page.title }
+            </a>
+        </nav>
+
+        <route path=":id?">
+            <h1>{getPageById(route).title}</h1>
+            <p>{getPageById(route).body}</p>
+        </route>
+    </router>
+
     <div class="px-12">
         <div class="flex-row mb-2">
             <input id="album" type="button" onclick={click} value="Albums"
@@ -26,13 +40,27 @@
     </div>
 
     <script>
+        const pages = [
+            { id: "home", title: "Home", body: "Onzer" },
+            { id: "playlist", title: "Playlist", body: "Onzer" },
+        ]
+
+        const initialRoute = `${window.location.hash ? window.location.hash.replace('#', '') : 'home'}`
+
         export default {
+            components: {
+                router: route.Router;
+                route: route.Route;
+            },
             state: {
                 placeholder: "Rechercher dans les albums",
                 items: [],
                 search: "albums",
                 filter: undefined,
-                id: undefined
+                id: undefined,
+                pages,
+                initialRoute,
+                base: '/#'
             },
             onBeforeMount(props) {
                 this.loadData(props.items);
@@ -99,6 +127,10 @@
             },
             navigateToPlaylists() {
                 route('/playlists');
+            },
+            getPageById(route) {
+                const {id} = route.params
+                return pages.find(page => page.id === id) || pages[0]
             }
         }
     </script>

playlists.riot

@@ -1,14 +0,0 @@
-<playlists>
-    <h1>Playlists Page</h1>
-    <p>This is the playlists page. It is currently empty.</p>
-
-    <script>
-        export default {
-            // Votre code de composant ici (si nécessaire)
-        }
-    </script>
-
-    <style>
-        /* Votre style ici (si nécessaire) */
-    </style>
-</playlists>