handle client-side history changes

Author: rmorshea

js/src/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import htm from "htm";
 
@@ -15,6 +15,21 @@ export function bind(node, config) {
   };
 }
 
+export function History({ onChange }) {
+  // capture changes to the browser's history
+  useEffect(() => {
+    const listener = () => {
+      onChange({
+        pathname: window.location.pathname,
+        search: window.location.search,
+      });
+    };
+    window.addEventListener("popstate", listener);
+    return () => window.removeEventListener("popstate", listener);
+  });
+  return null;
+}
+
 export function Link({ to, onClick, children, ...props }) {
   const handleClick = (event) => {
     event.preventDefault();

reactpy_router/core.py

@@ -18,6 +18,7 @@
 from reactpy.core.types import VdomChild, VdomDict
 from reactpy.types import ComponentType, Context, Location
 from reactpy.web.module import export, module_from_file
+from reactpy import html
 
 from reactpy_router.types import Route, RouteCompiler, Router, RouteResolver
 
@@ -54,9 +55,12 @@ def router_component(
 
     if match is not None:
         element, params = match
-        return ConnectionContext(
-            _route_state_context(element, value=_RouteState(set_location, params)),
-            value=Connection(old_conn.scope, location, old_conn.carrier),
+        return html._(
+            ConnectionContext(
+                _route_state_context(element, value=_RouteState(set_location, params)),
+                value=Connection(old_conn.scope, location, old_conn.carrier),
+            ),
+            _history({"on_change": lambda event: set_location(Location(**event))}),
         )
 
     return None
@@ -113,9 +117,9 @@ def _match_route(
     return None
 
 
-_link = export(
+_link, _history = export(
     module_from_file("reactpy-router", file=Path(__file__).parent / "bundle.js"),
-    "Link",
+    ("Link", "History"),
 )