update router examples

examples/router.rs

@@ -1,36 +1,58 @@
 #![allow(non_snake_case)]
 
 use dioxus::prelude::*;
-use dioxus_router::{Link, Route, Router};
-use serde::Deserialize;
+use dioxus_router::prelude::*;
 
 fn main() {
     dioxus_desktop::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
-    cx.render(rsx! {
-        Router {
-            ul {
-                Link { to: "/",  li { "Go home!" } }
-                Link { to: "/users",  li { "List all users" } }
-                Link { to: "/blog", li { "Blog posts" } }
+    use_router(cx, &|| RouterConfiguration::default(), &|| {
+        Segment::content(comp(Home))
+            .fixed(
+                "users",
+                Route::empty()
+                    .nested(Segment::content(comp(UserList)).catch_all((comp(User), UserId { }))),
+            )
+            .fixed(
+                "blog",
+                Route::empty().nested(
+                    Segment::content(comp(BlogList)).catch_all((comp(BlogPost), PostId { })),
+                ),
+            )
+            .fallback(comp(E404))
+    });
 
-                Link { to: "/users/bill",  li { "List all users" } }
-                Link { to: "/blog/5", li { "Blog post 5" } }
-            }
-            Route { to: "/", "Home" }
-            Route { to: "/users", "User list" }
-            Route { to: "/users/:name", User {} }
-            Route { to: "/blog", "Blog list" }
-            Route { to: "/blog/:post", BlogPost {} }
-            Route { to: "", "Err 404 Route Not Found" }
+    cx.render(rsx! {
+        ul {
+            li { Link { target: "/", "Go home!" } }
+            li { Link { target: "/users", "List all users" } }
+            li { Link { target: "/blog", "Blog posts" }}
         }
+
+        Outlet { }
     })
 }
 
+fn Home(cx: Scope) -> Element {
+    render!(h1 { "Home" })
+}
+
+fn BlogList(cx: Scope) -> Element {
+    render! {
+        h1 { "Blog Posts" }
+        ul {
+            li { Link { target: "/blog/1", "First blog post" } }
+            li { Link { target: "/blog/2", "Second blog post" } }
+            li { Link { target: "/blog/3", "Third blog post" } }
+        }
+    }
+}
+
+struct PostId;
 fn BlogPost(cx: Scope) -> Element {
-    let post = dioxus_router::use_route(cx).last_segment().unwrap();
+    let post = use_route(cx)?.parameter::<PostId>().unwrap();
 
     cx.render(rsx! {
         div {
@@ -40,24 +62,31 @@ fn BlogPost(cx: Scope) -> Element {
     })
 }
 
-#[derive(Deserialize)]
-struct Query {
-    bold: bool,
+fn UserList(cx: Scope) -> Element {
+    render! {
+        h1 { "Users" }
+        ul {
+            li { Link { target: "/users/bill", "Bill" } }
+            li { Link { target: "/users/jeremy", "Jeremy" } }
+            li { Link { target: "/users/adrian", "Adrian" } }
+        }
+    }
 }
 
+struct UserId;
 fn User(cx: Scope) -> Element {
-    let post = dioxus_router::use_route(cx).last_segment().unwrap();
+    let state = use_route(cx)?;
 
-    let query = dioxus_router::use_route(cx)
-        .query::<Query>()
-        .unwrap_or(Query { bold: false });
+    let user = state.parameter::<UserId>().unwrap();
+
+    let query = state.query.as_ref().map(|q| q.clone()).unwrap_or_default();
+    let bold = query.contains("bold") && !query.contains("bold=false");
 
     cx.render(rsx! {
         div {
-            h1 { "Reading blog post: {post}" }
-            p { "example blog post" }
+            h1 { "Showing user: {user}" }
 
-            if query.bold {
+            if bold {
                 rsx!{ b { "bold" } }
             } else {
                 rsx!{ i { "italic" } }
@@ -65,3 +94,7 @@ fn User(cx: Scope) -> Element {
         }
     })
 }
+
+fn E404(cx: Scope) -> Element {
+    render!(h1 { "Error 404 - Page not Found" })
+}