do some stuff with the url

reflex/compiler/compiler.py

@@ -568,7 +568,7 @@ def compile_page(
         The path and code of the compiled page.
     """
     # Get the path for the output file.
-    output_path = utils.get_page_path(path if path != "index" else "_index")
+    output_path = utils.get_page_path(path)
 
     # Add the style to the component.
     code = _compile_page(component, state)

reflex/compiler/utils.py

@@ -392,6 +392,23 @@ def create_theme(style: ComponentStyle) -> dict:
     return {"styles": {"global": root_style}}
 
 
+def _format_route_part(part: str) -> str:
+    if part.startswith("[") and part.endswith("]"):
+        return f"${part}_"
+    return "[" + part + "]_"
+
+
+def _path_to_file_stem(path: str) -> str:
+    if path == "index":
+        return "_index"
+    if path.removeprefix("/") == "404":
+        return "404"
+    path = path if path != "index" else "/"
+    return (
+        ".".join([_format_route_part(part) for part in path.split("/")]) + "._index"
+    ).lstrip(".")
+
+
 def get_page_path(path: str) -> str:
     """Get the path of the compiled JS file for the given page.
 
@@ -405,7 +422,7 @@ def get_page_path(path: str) -> str:
         get_web_dir()
         / constants.Dirs.PAGES
         / constants.Dirs.ROUTES
-        / (path + constants.Ext.JS)
+        / (_path_to_file_stem(path) + constants.Ext.JS)
     )
 
 

tests/integration/test_dynamic_routes.py

@@ -271,7 +271,7 @@ async def test_on_load_navigate(
         # wait for navigation, then assert on url
         with poll_for_navigation(driver):
             link.click()
-        assert urlsplit(driver.current_url).path == f"/page/{ix}/"
+        assert urlsplit(driver.current_url).path == f"/page/{ix}"
 
         link = driver.find_element(By.ID, "link_page_next")
         page_id_input = driver.find_element(By.ID, "page_id")
@@ -363,7 +363,7 @@ async def test_on_load_navigate_non_dynamic(
 
     with poll_for_navigation(driver):
         link.click()
-    assert urlsplit(driver.current_url).path == "/static/x/"
+    assert urlsplit(driver.current_url).path == "/static/x"
     await poll_for_order(["/static/x-no page id"])
 
     # go back to the index and navigate back to the static route