update the router guide

docs/router/examples/full_example.rs

@@ -1,37 +1,49 @@
+#![allow(non_snake_case)]
+
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
 fn main() {
+    #[cfg(target_arch = "wasm32")]
     dioxus_web::launch(App);
+    #[cfg(not(target_arch = "wasm32"))]
+    dioxus_desktop::launch(App);
 }
 
-#[derive(Routable, Clone, Serialize, Deserialize)]
+// ANCHOR: router
+#[derive(Routable, Clone)]
 #[rustfmt::skip]
 enum Route {
-    #[route("/")]
-    Home {},
-    #[nest("/blog")]
-        #[layout(Blog)]
-            #[route("/")]
-            BlogList {},
-            #[route("/blog/:id")]
-            BlogPost { id: String },
-        #[end_layout]
+    #[layout(NavBar)]
+        #[route("/")]
+        Home {},
+        #[nest("/blog")]
+            #[layout(Blog)]
+                #[route("/")]
+                BlogList {},
+                #[route("/blog/:name")]
+                BlogPost { name: String },
+            #[end_layout]
+        #[end_nest]
+    #[end_layout]
+    #[nest("/myblog")]
+        #[redirect("/", || Route::BlogList {})]
+        #[redirect("/:name", |name: String| Route::BlogPost { name })]
     #[end_nest]
-    #[redirect("/myblog", || Route::BlogList {})]
     #[route("/:...route")]
     PageNotFound {
         route: Vec<String>,
     },
 }
+// ANCHOR_END: router
 
 fn App(cx: Scope) -> Element {
     render! {
-        NavBar {}
         Router {}
     }
 }
 
+#[inline_props]
 fn NavBar(cx: Scope) -> Element {
     render! {
         nav {
@@ -40,6 +52,7 @@ fn NavBar(cx: Scope) -> Element {
                 li { Link { target: Route::BlogList {}, "Blog" } }
             }
         }
+        Outlet {}
     }
 }
 
@@ -65,13 +78,13 @@ fn BlogList(cx: Scope) -> Element {
         ul {
             li {
                 Link {
-                    target: Route::BlogPost { id: 1 },
+                    target: Route::BlogPost { name: "Blog post 1".into() },
                     "Read the first blog post"
                 }
             }
             li {
                 Link {
-                    target: Route::BlogPost { id: 2 },
+                    target: Route::BlogPost { name: "Blog post 2".into() },
                     "Read the second blog post"
                 }
             }
@@ -80,9 +93,9 @@ fn BlogList(cx: Scope) -> Element {
 }
 
 #[inline_props]
-fn BlogPost(cx: Scope, id: usize) -> Element {
+fn BlogPost(cx: Scope, name: String) -> Element {
     render! {
-        h2 { "Blog Post: {id}"}
+        h2 { "Blog Post: {name}"}
     }
 }