Support query parameters in routes

examples/router/src/main.rs

@@ -1,5 +1,5 @@
 use sycamore::prelude::*;
-use sycamore_router::{HistoryIntegration, Route, Router};
+use sycamore_router::{create_query, HistoryIntegration, Route, Router};
 
 #[derive(Route, Clone)]
 enum AppRoutes {
@@ -11,6 +11,8 @@ enum AppRoutes {
     Wildcard { path: Vec<String> },
     #[to("/uint-capture/<unit>")]
     Unit(u32),
+    #[to("/query-params")]
+    QueryParams,
     #[not_found]
     NotFound,
 }
@@ -32,6 +34,8 @@ fn App() -> View {
                             br {}
                             a(href="/uint-capture/42") {"Unit: 42"}
                             br {}
+                            a(href="/query-params") {"Query Params"}
+                            br {}
                             a(href="/not-found") {"Not Found"}
                             br {}
 
@@ -51,6 +55,14 @@ fn App() -> View {
                                 AppRoutes::Unit(unit) => view! {
                                     h1 { "Unit: " (unit) }
                                 },
+                                AppRoutes::QueryParams => {
+                                    let q = create_query("q");
+                                    view! {
+                                        h1 { "Query Params" }
+                                        a(href="?q=a") { "A" } a(href="?q=b") { "B" }
+                                        p { "Query: " (q.get_clone().unwrap_or_default()) }
+                                    }
+                                }
                                 AppRoutes::NotFound => view! {
                                     h1 { "Not Found" }
                                 },

packages/sycamore-router/Cargo.toml

@@ -29,5 +29,6 @@ features = [
 	"PopStateEvent",
 	"Url",
 	"Window",
+	"UrlSearchParams",
 ]
 version = "0.3.60"

packages/sycamore-router/src/router.rs

@@ -4,7 +4,7 @@
 
 use sycamore::prelude::*;
 use wasm_bindgen::prelude::*;
-use web_sys::{Element, HtmlAnchorElement, HtmlBaseElement, KeyboardEvent};
+use web_sys::{Element, Event, HtmlAnchorElement, HtmlBaseElement, KeyboardEvent, UrlSearchParams};
 
 use crate::Route;
 
@@ -24,6 +24,7 @@
 
 thread_local! {
     static PATHNAME: Cell<Option<Signal<String>>> = const { Cell::new(None) };
+    static QUERY: Cell<Option<Signal<()>>> = const { Cell::new(None) };
 }
 
 /// A router integration that uses the
@@ -78,6 +79,7 @@
                 let origin = a.origin();
                 let a_pathname = a.pathname();
                 let hash = a.hash();
+                let query = a.search();
 
                 let meta_keys_pressed = meta_keys_pressed(ev.unchecked_ref::<KeyboardEvent>());
                 if !meta_keys_pressed && location.origin() == Ok(origin) {
@@ -98,8 +100,34 @@
                                 .unwrap_throw();
                             window().scroll_to_with_x_and_y(0.0, 0.0);
                         });
+                    } else if location.search().as_ref() != Ok(&query) {
+                        // Same origin, same pathname, different query.
+                        ev.prevent_default();
+                        let history = window().history().unwrap_throw();
+                        if query.is_empty() {
+                            history
+                                .push_state_with_url(&JsValue::UNDEFINED, "", Some(&a.href()))
+                                .unwrap_throw();
+                        } else {
+                            let history = window().history().unwrap_throw();
+                            history
+                                .push_state_with_url(&JsValue::UNDEFINED, "", Some(&query))
+                                .unwrap_throw();
+                        }
+                        QUERY.with(|query| query.get().unwrap_throw().update(|_| {}));
                     } else if location.hash().as_ref() != Ok(&hash) {
-                        // Same origin, same pathname, different hash. Use default browser behavior.
+                        // Same origin, same pathname, same query, different hash. Use default
+                        // browser behavior.
+                        if hash.is_empty() {
+                            ev.prevent_default();
+                            let history = window().history().unwrap_throw();
+                            history
+                                .push_state_with_url(&JsValue::UNDEFINED, "", Some(&a.href()))
+                                .unwrap_throw();
+                            window()
+                                .dispatch_event(&Event::new("hashchanged").unwrap())
+                                .unwrap_throw();
+                        }
                     } else {
                         // Same page. Do nothing.
                         ev.prevent_default();
@@ -233,6 +261,7 @@
         let path = integration.current_pathname();
         let path = path.strip_prefix(&base_pathname).unwrap_or(&path);
         pathname.set(Some(create_signal(path.to_string())));
+        QUERY.set(Some(create_signal(())));
     });
     let pathname = PATHNAME.with(|p| p.get().unwrap_throw());
 
@@ -370,44 +399,73 @@
     });
 }
 
-/// Navigates to the specified `url` without touching the history API.
-///
-/// This means that the url will not be updated and will continue to show the previous value.
-///
-/// # Panics
-/// This function will `panic!()` if a [`Router`] has not yet been created.
-pub fn navigate_no_history(url: &str) {
+/// Creates a ReadSignal that tracks the url query provided.
+pub fn create_query(query: &'static str) -> ReadSignal<Option<String>> {
     PATHNAME.with(|pathname| {
         assert!(
             pathname.get().is_some(),
-            "navigate_no_history can only be used with a Router"
+            "create_query can only be used with a Router"
         );
 
         let pathname = pathname.get().unwrap_throw();
-        let path = url.strip_prefix(&base_pathname()).unwrap_or(url);
-        pathname.set(path.to_string());
 
-        window().scroll_to_with_x_and_y(0.0, 0.0);
-    });
+        create_memo(move || {
+            QUERY.with(|query| query.get().unwrap_throw()).track();
+            pathname.track();
+            UrlSearchParams::new_with_str(&window().location().search().unwrap_throw())
+                .unwrap_throw()
+                .get(query)
+        })
+    })
 }
 
-/// Preform a "soft" refresh of the current page.
-///
-/// Unlike a "hard" refresh which corresponds to clicking on the refresh button, this simply forces a re-render of the view for the current page.
-///
-/// # Panic
-/// This function will `panic!()` if a [`Router`] has not yet been created.
-pub fn refresh() {
+/// Creates a ReadSignal that tracks the url query string.
+pub fn create_queries() -> ReadSignal<UrlSearchParams> {
     PATHNAME.with(|pathname| {
         assert!(
             pathname.get().is_some(),
-            "refresh can only be used with a Router"
+            "create_queries can only be used with a Router"
         );
 
-        pathname.get().unwrap_throw().update(|_| {});
+        let pathname = pathname.get().unwrap_throw();
 
-        window().scroll_to_with_x_and_y(0.0, 0.0);
-    });
+        create_memo(move || {
+            QUERY.with(|query| query.get().unwrap_throw()).track();
+            pathname.track();
+            UrlSearchParams::new_with_str(&window().location().search().unwrap_throw())
+                .unwrap_throw()
+        })
+    })
+}
+
+/// Creates a ReadSignal that tracks the url fragment.
+pub fn create_fragment() -> ReadSignal<String> {
+    PATHNAME.with(|pathname| {
+        assert!(
+            pathname.get().is_some(),
+            "create_fragment can only be used with a Router"
+        );
+
+        let pathname = pathname.get().unwrap_throw();
+
+        let on_frag_change = create_signal(());
+        window()
+            .add_event_listener_with_callback(
+                "hashchange",
+                Closure::wrap(Box::new(move || {
+                    on_frag_change.update(|_| {});
+                }) as Box<dyn FnMut()>)
+                .into_js_value()
+                .unchecked_ref(),
+            )
+            .unwrap_throw();
+
+        create_memo(move || {
+            on_frag_change.track();
+            pathname.track();
+            window().location().hash().unwrap_throw()
+        })
+    })
 }
 
 fn meta_keys_pressed(kb_event: &KeyboardEvent) -> bool {