functional navigate component

Author: Archmonger

src/js/src/index.js

@@ -12,13 +12,13 @@ export function bind(node) {
   };
 }
 
-export function History({ onHistoryChange }) {
+export function History({ onHistoryChangeCallback }) {
   // Capture browser "history go back" action and tell the server about it
   // Note: Browsers do not allow us to detect "history go forward" actions.
   React.useEffect(() => {
     // Register a listener for the "popstate" event and send data back to the server using the `onHistoryChange` callback.
     const listener = () => {
-      onHistoryChange({
+      onHistoryChangeCallback({
         pathname: window.location.pathname,
         search: window.location.search,
       });
@@ -34,29 +34,29 @@ export function History({ onHistoryChange }) {
   // Tell the server about the URL during the initial page load
   // FIXME: This currently runs every time any component is mounted due to a ReactPy core rendering bug.
   // https://github.com/reactive-python/reactpy/pull/1224
-  React.useEffect(() => {
-    onHistoryChange({
-      pathname: window.location.pathname,
-      search: window.location.search,
-    });
-    return () => {};
-  }, []);
+  // React.useEffect(() => {
+  //   onHistoryChange({
+  //     pathname: window.location.pathname,
+  //     search: window.location.search,
+  //   });
+  //   return () => {};
+  // }, []);
   return null;
 }
 
 // FIXME: The Link component is unused due to a ReactPy core rendering bug
 // which causes duplicate rendering (and thus duplicate event listeners).
 // https://github.com/reactive-python/reactpy/pull/1224
-export function Link({ onClick, linkClass }) {
+export function Link({ onClickCallback, linkClass }) {
   // This component is not the actual anchor link.
   // It is an event listener for the link component created by ReactPy.
   React.useEffect(() => {
     // Event function that will tell the server about clicks
     const handleClick = (event) => {
       event.preventDefault();
       let to = event.target.getAttribute("href");
-      window.history.pushState({}, to, new URL(to, window.location));
-      onClick({
+      window.history.pushState(null, "", new URL(to, window.location));
+      onClickCallback({
         pathname: window.location.pathname,
         search: window.location.search,
       });
@@ -78,3 +78,20 @@ export function Link({ onClick, linkClass }) {
   });
   return null;
 }
+
+export function Navigate({ onNavigateCallback, to, replace }) {
+  React.useEffect(() => {
+    if (replace) {
+      window.history.replaceState(null, "", new URL(to, window.location));
+    } else {
+      window.history.pushState(null, "", new URL(to, window.location));
+    }
+    onNavigateCallback({
+      pathname: window.location.pathname,
+      search: window.location.search,
+    });
+    return () => {};
+  }, []);
+
+  return null;
+}

src/reactpy_router/__init__.py

@@ -2,7 +2,7 @@
 __version__ = "0.1.1"
 
 
-from .components import link, route
+from .components import link, navigate, route
 from .hooks import use_params, use_search_params
 from .routers import browser_router, create_router
 
@@ -13,4 +13,5 @@
     "browser_router",
     "use_params",
     "use_search_params",
+    "navigate",
 )

src/reactpy_router/components.py

@@ -26,6 +26,12 @@
 )
 """Client-side portion of link handling"""
 
+Navigate = export(
+    module_from_file("reactpy-router", file=Path(__file__).parent / "static" / "bundle.js"),
+    ("Navigate"),
+)
+"""Client-side portion of the navigate component"""
+
 link_js_content = (Path(__file__).parent / "static" / "link.js").read_text(encoding="utf-8")
 
 
@@ -93,11 +99,32 @@ def on_click(_event: dict[str, Any]) -> None:
 
     return html._(html.a(attrs, *children), html.script(link_js_content.replace("UUID", uuid_string)))
 
-    # def on_click(_event: dict[str, Any]) -> None:
+    # def on_click_callback(_event: dict[str, Any]) -> None:
     #     set_location(Location(**_event))
-    # return html._(html.a(attrs, *children), Link({"onClick": on_click, "linkClass": uuid_string}))
+    # return html._(html.a(attrs, *children), Link({"onClickCallback": on_click_callback, "linkClass": uuid_string}))
 
 
 def route(path: str, element: Any | None, *routes: Route) -> Route:
     """Create a route with the given path, element, and child routes."""
     return Route(path, element, routes)
+
+
+def navigate(to: str, replace: bool = False) -> Component:
+    """A `navigate` element changes the current location when it is rendered."""
+    return _navigate(to, replace)
+
+
+@component
+def _navigate(to: str, replace: bool = False) -> VdomDict | None:
+    """A `navigate` element changes the current location when it is rendered."""
+    location = use_connection().location
+    set_location = _use_route_state().set_location
+    pathname = to.split("?", 1)[0]
+
+    def on_navigate_callback(_event: dict[str, Any]) -> None:
+        set_location(Location(**_event))
+
+    if location.pathname != pathname:
+        return Navigate({"onNavigateCallback": on_navigate_callback, "to": to, "replace": replace})
+
+    return None

src/reactpy_router/routers.py

@@ -71,7 +71,7 @@ def on_history_change(event: dict[str, Any]) -> None:
                 set_location(new_location)
 
         return ConnectionContext(
-            History({"onHistoryChange": on_history_change}),  # type: ignore[return-value]
+            History({"onHistoryChangeCallback": on_history_change}),  # type: ignore[return-value]
             *route_elements,
             value=Connection(old_conn.scope, location, old_conn.carrier),
         )