Merge branch 'master' into events-2

examples/mobile_demo/src/lib.rs

@@ -72,7 +72,7 @@ fn app(cx: Scope) -> Element {
                     onclick: move|_| {
                         println!("Clicked!");
                         items.push(items.len());
-                        cx.needs_update_any(ScopeId(0));
+                        cx.needs_update_any(ScopeId::ROOT);
                         println!("Requested update");
                     },
                     "Add item"

examples/query_segments_demo/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "query_segments_demo"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { path = "../../packages/dioxus", version = "*" }
+dioxus-router = { path = "../../packages/router", version = "*" }
+dioxus-web = { path = "../../packages/web", version = "*" }
+form_urlencoded = "1.2.0"

examples/query_segments_demo/src/main.rs

@@ -0,0 +1,73 @@
+#![allow(non_snake_case, unused)]
+//! Example: Url query segments usage
+//! ------------------------------------
+//!
+//! This example shows how to access and use multiple query segments present in an url on the web.
+//!
+//! Run `dx serve` and navigate to `http://localhost:8080/blog?name=John&surname=Doe`
+use std::fmt::Display;
+
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    // segments that start with ?: are query segments
+    #[route("/blog?:query_params")]
+    BlogPost {
+        // You must include query segments in child variants
+        query_params: BlogQuerySegments,
+    },
+}
+
+#[derive(Debug, Clone, PartialEq)]
+struct BlogQuerySegments {
+    name: String,
+    surname: String,
+}
+
+/// The display impl needs to display the query in a way that can be parsed:
+impl Display for BlogQuerySegments {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "name={}&surname={}", self.name, self.surname)
+    }
+}
+
+/// The query segment is anything that implements https://docs.rs/dioxus-router/latest/dioxus_router/routable/trait.FromQuery.html. You can implement that trait for a struct if you want to parse multiple query parameters.
+impl FromQuery for BlogQuerySegments {
+    fn from_query(query: &str) -> Self {
+        let mut name = None;
+        let mut surname = None;
+        let pairs = form_urlencoded::parse(query.as_bytes());
+        pairs.for_each(|(key, value)| {
+            if key == "name" {
+                name = Some(value.clone().into());
+            }
+            if key == "surname" {
+                surname = Some(value.clone().into());
+            }
+        });
+        Self {
+            name: name.unwrap(),
+            surname: surname.unwrap(),
+        }
+    }
+}
+
+#[inline_props]
+fn BlogPost(cx: Scope, query_params: BlogQuerySegments) -> Element {
+    render! {
+        div{"This is your blogpost with a query segment:"}
+        div{format!("{:?}", query_params)}
+    }
+}
+
+fn App(cx: Scope) -> Element {
+    render! { Router::<Route>{} }
+}
+
+fn main() {
+    dioxus_web::launch(App);
+}