Fix link component

Author: Archmonger

docs/examples/python/nested-routes.py

@@ -1,6 +1,7 @@
 from typing import TypedDict
 
 from reactpy import component, html, run
+
 from reactpy_router import browser_router, link, route
 
 message_data: list["MessageDataType"] = [
@@ -40,10 +41,7 @@ def home():
 
 @component
 def all_messages():
-    last_messages = {
-        ", ".join(msg["with"]): msg
-        for msg in sorted(message_data, key=lambda m: m["id"])
-    }
+    last_messages = {", ".join(msg["with"]): msg for msg in sorted(message_data, key=lambda m: m["id"])}
     return html.div(
         html.h1("All Messages 💬"),
         html.ul(
@@ -66,7 +64,7 @@ def all_messages():
 
 @component
 def messages_with(*names):
-    messages = [msg for msg in message_data if set(msg["with"]) == names]
+    messages = [msg for msg in message_data if tuple(msg["with"]) == names]
     return html.div(
         html.h1(f"Messages with {', '.join(names)} 💬"),
         html.ul(

docs/examples/python/route-parameters.py

@@ -1,6 +1,7 @@
 from typing import TypedDict
 
 from reactpy import component, html, run
+
 from reactpy_router import browser_router, link, route
 from reactpy_router.core import use_params
 
@@ -39,10 +40,7 @@ def home():
 
 @component
 def all_messages():
-    last_messages = {
-        ", ".join(msg["with"]): msg
-        for msg in sorted(message_data, key=lambda m: m["id"])
-    }
+    last_messages = {", ".join(msg["with"]): msg for msg in sorted(message_data, key=lambda m: m["id"])}
     return html.div(
         html.h1("All Messages 💬"),
         html.ul(
@@ -66,7 +64,7 @@ def all_messages():
 @component
 def messages_with():
     names = set(use_params()["names"].split("-"))  # and here we use the path param
-    messages = [msg for msg in message_data if set(msg["with"]) == names]
+    messages = [msg for msg in message_data if tuple(msg["with"]) == names]
     return html.div(
         html.h1(f"Messages with {', '.join(names)} 💬"),
         html.ul(

src/reactpy_router/core.py

@@ -83,13 +83,22 @@ def router_component(
 
 @component
 def link(*children: VdomChild, to: str, **attributes: Any) -> VdomDict:
-    """A component that renders a link to the given path"""
+    """A component that renders a link to the given path.
+
+    FIXME: This currently works in a "dumb" way by trusting that ReactPy's script tag
+    properly sets the location. When a client-server communication layer is added to
+    ReactPy, this component will need to be rewritten to use that instead."""
     set_location = _use_route_state().set_location
     uuid = uuid4().hex
+
+    def on_click(_event: dict[str, Any]) -> None:
+        pathname, search = to.split("?", 1) if "?" in to else (to, "")
+        set_location(Location(pathname, search))
+
     attrs = {
         **attributes,
-        "to": to,
-        "onClick": lambda event: set_location(Location(**event)),
+        "href": to,
+        "onClick": on_click,
         "id": uuid,
     }
     return html._(html.a(attrs, *children), html.script(link_js_content.replace("UUID", uuid)))

src/reactpy_router/static/link.js

@@ -1,8 +1,5 @@
 document.getElementById("UUID").addEventListener("click", (event) => {
-    event.preventDefault();
-    window.history.pushState({}, to, new URL(to, window.location));
-    onClick({
-        pathname: window.location.pathname,
-        search: window.location.search,
-    });
+  event.preventDefault();
+  let to = event.target.getAttribute("href");
+  window.history.pushState({}, to, new URL(to, window.location));
 });