Server side handling of relative URLs

Author: Archmonger

src/reactpy_router/components.py

@@ -2,9 +2,10 @@
 
 from pathlib import Path
 from typing import Any
+from urllib.parse import urljoin
 from uuid import uuid4
 
-from reactpy import component, event, html
+from reactpy import component, event, html, use_connection
 from reactpy.backend.types import Location
 from reactpy.core.types import VdomChild, VdomDict
 from reactpy.web.module import export, module_from_file
@@ -26,12 +27,30 @@ def link(*children: VdomChild, to: str, **attributes: Any) -> VdomDict:
     # properly sets the location. When a client-server communication layer is added to a \
     # future ReactPy release, this component will need to be rewritten to use that instead. \
     set_location = _use_route_state().set_location
+    current_path = use_connection().location.pathname
 
     @event(prevent_default=True)
     def on_click(_event: dict[str, Any]) -> None:
         pathname, search = to.split("?", 1) if "?" in to else (to, "")
         if search:
             search = f"?{search}"
+
+        # Resolve relative paths that match `../foo`
+        if pathname.startswith("../"):
+            pathname = urljoin(current_path, pathname)
+
+        # Resolve relative paths that match `foo`
+        if not pathname.startswith("/"):
+            pathname = urljoin(current_path, pathname)
+
+        # Resolve relative paths that match `/foo/../bar`
+        while "/../" in pathname:
+            part_1, part_2 = pathname.split("/../", 1)
+            pathname = urljoin(f"{part_1}/", f"../{part_2}")
+
+        # Resolve relative paths that match `foo/./bar`
+        pathname = pathname.replace("/./", "/")
+
         set_location(Location(pathname, search))
 
     uuid_string = f"link-{uuid4().hex}"

tests/test_core.py

@@ -193,22 +193,26 @@ async def test_relative_links(display: DisplayFixture):
     def sample():
         return browser_router(
             route("/", link("Root", to="/a", id="root")),
-            route("/a", link("A", to="/a/b", id="a")),
+            route("/a", link("A", to="/a/a/../b", id="a")),
             route("/a/b", link("B", to="../a/b/c", id="b")),
             route("/a/b/c", link("C", to="../d", id="c")),
             route("/a/d", link("D", to="e", id="d")),
-            route("/a/e", link("E", to="../default", id="e")),
+            route("/a/e", link("E", to="/a/./f", id="e")),
+            route("/a/f", link("F", to="../default", id="f")),
             route("{default:any}", html.h1({"id": "default"}, "Default")),
         )
 
     await display.show(sample)
 
-    for link_selector in ["#root", "#a", "#b", "#c", "#d", "#e"]:
+    for link_selector in ["#root", "#a", "#b", "#c", "#d", "#e", "#f"]:
         lnk = await display.page.wait_for_selector(link_selector)
         await lnk.click()
 
     await display.page.wait_for_selector("#default")
 
+    await display.page.go_back()
+    await display.page.wait_for_selector("#f")
+
     await display.page.go_back()
     await display.page.wait_for_selector("#e")