fix client storage

Author: adhami3310

reflex/.templates/web/app/routes.js

@@ -2,8 +2,8 @@ import { route } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
 export default [
-  route("*", "routes/404.js"),
+  route("*", "routes/[404]_._index.js"),
   ...(await flatRoutes({
-    ignoredRouteFiles: ["routes/404.js"],
+    ignoredRouteFiles: ["routes/\\[404\\]_._index.js"],
   })),
 ];

reflex/.templates/web/utils/state.js

@@ -6,7 +6,12 @@ import env from "$/env.json";
 import reflexEnvironment from "$/reflex.json";
 import Cookies from "universal-cookie";
 import { useEffect, useRef, useState } from "react";
-import { useLocation, useNavigate, useSearchParams } from "react-router";
+import {
+  useLocation,
+  useNavigate,
+  useSearchParams,
+  useParams,
+} from "react-router";
 import {
   initialEvents,
   initialState,
@@ -159,14 +164,20 @@ export const evalReactComponent = async (component) => {
  * @param event The event to queue.
  * @param socket The socket object to send the event on.
  * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  *
  * @returns Adds event to queue and processes it if websocket exits, does nothing otherwise.
  */
-export const queueEventIfSocketExists = async (events, socket, navigate) => {
+export const queueEventIfSocketExists = async (
+  events,
+  socket,
+  navigate,
+  params,
+) => {
   if (!socket) {
     return;
   }
-  await queueEvents(events, socket, navigate);
+  await queueEvents(events, socket, navigate, params);
 };
 
 /**
@@ -189,10 +200,11 @@ function urlFrom(string) {
  * @param event The event to send.
  * @param socket The socket object to send the event on.
  * @param navigate The navigate function from useNavigate
+ * @param params The params object from useParams
  *
  * @returns True if the event was sent, false if it was handled locally.
  */
-export const applyEvent = async (event, socket, navigate) => {
+export const applyEvent = async (event, socket, navigate, params) => {
   // Handle special events
   if (event.name == "_redirect") {
     if ((event.payload.path ?? undefined) === undefined) {
@@ -223,31 +235,31 @@ export const applyEvent = async (event, socket, navigate) => {
 
   if (event.name == "_remove_cookie") {
     cookies.remove(event.payload.key, { ...event.payload.options });
-    queueEventIfSocketExists(initialEvents(), socket, navigate);
+    queueEventIfSocketExists(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_clear_local_storage") {
     localStorage.clear();
-    queueEventIfSocketExists(initialEvents(), socket, navigate);
+    queueEventIfSocketExists(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_remove_local_storage") {
     localStorage.removeItem(event.payload.key);
-    queueEventIfSocketExists(initialEvents(), socket, navigate);
+    queueEventIfSocketExists(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_clear_session_storage") {
     sessionStorage.clear();
-    queueEvents(initialEvents(), socket, navigate);
+    queueEvents(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_remove_session_storage") {
     sessionStorage.removeItem(event.payload.key);
-    queueEvents(initialEvents(), socket, navigate);
+    queueEvents(initialEvents(), socket, navigate, params);
     return false;
   }
 
@@ -355,7 +367,10 @@ export const applyEvent = async (event, socket, navigate) => {
     // Since we don't have router directly, we need to get info from our hooks
     event.router_data = {
       pathname: window.location.pathname,
-      query: Object.fromEntries(new URLSearchParams(window.location.search)),
+      query: {
+        ...Object.fromEntries(new URLSearchParams(window.location.search)),
+        ...params,
+      },
       asPath: window.location.pathname + window.location.search,
     };
   }
@@ -374,15 +389,16 @@ export const applyEvent = async (event, socket, navigate) => {
  * @param event The current event.
  * @param socket The socket object to send the response event(s) on.
  * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  *
  * @returns Whether the event was sent.
  */
-export const applyRestEvent = async (event, socket, navigate) => {
+export const applyRestEvent = async (event, socket, navigate, params) => {
   let eventSent = false;
   if (event.handler === "uploadFiles") {
     if (event.payload.files === undefined || event.payload.files.length === 0) {
       // Submit the event over the websocket to trigger the event handler.
-      return await applyEvent(Event(event.name), socket, navigate);
+      return await applyEvent(Event(event.name), socket, navigate, params);
     }
 
     // Start upload, but do not wait for it, which would block other events.
@@ -404,8 +420,15 @@ export const applyRestEvent = async (event, socket, navigate) => {
  * @param socket The socket object to send the event on.
  * @param prepend Whether to place the events at the beginning of the queue.
  * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  */
-export const queueEvents = async (events, socket, prepend, navigate) => {
+export const queueEvents = async (
+  events,
+  socket,
+  prepend,
+  navigate,
+  params,
+) => {
   if (prepend) {
     // Drain the existing queue and place it after the given events.
     events = [
@@ -416,15 +439,16 @@ export const queueEvents = async (events, socket, prepend, navigate) => {
     ];
   }
   event_queue.push(...events.filter((e) => e !== undefined && e !== null));
-  await processEvent(socket.current, navigate);
+  await processEvent(socket.current, navigate, params);
 };
 
 /**
  * Process an event off the event queue.
  * @param socket The socket object to send the event on.
  * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  */
-export const processEvent = async (socket, navigate) => {
+export const processEvent = async (socket, navigate, params) => {
   // Only proceed if the socket is up and no event in the queue uses state, otherwise we throw the event into the void
   if (!socket && isStateful()) {
     return;
@@ -444,16 +468,16 @@ export const processEvent = async (socket, navigate) => {
   let eventSent = false;
   // Process events with handlers via REST and all others via websockets.
   if (event.handler) {
-    eventSent = await applyRestEvent(event, socket, navigate);
+    eventSent = await applyRestEvent(event, socket, navigate, params);
   } else {
-    eventSent = await applyEvent(event, socket, navigate);
+    eventSent = await applyEvent(event, socket, navigate, params);
   }
   // If no event was sent, set processing to false.
   if (!eventSent) {
     event_processing = false;
     // recursively call processEvent to drain the queue, since there is
     // no state update to trigger the useEffect event loop.
-    await processEvent(socket, navigate);
+    await processEvent(socket, navigate, params);
   }
 };
 
@@ -465,6 +489,7 @@ export const processEvent = async (socket, navigate) => {
  * @param setConnectErrors The function to update connection error value.
  * @param client_storage The client storage object from context.js
  * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  */
 export const connect = async (
   socket,
@@ -473,6 +498,7 @@ export const connect = async (
   setConnectErrors,
   client_storage = {},
   navigate,
+  params = {},
 ) => {
   // Get backend URL object from the endpoint.
   const endpoint = getBackendURL(EVENTURL);
@@ -547,12 +573,12 @@ export const connect = async (
     applyClientStorageDelta(client_storage, update.delta);
     event_processing = !update.final;
     if (update.events) {
-      queueEvents(update.events, socket, false, navigate);
+      queueEvents(update.events, socket, false, navigate, params);
     }
   });
   socket.current.on("reload", async (event) => {
     event_processing = false;
-    queueEvents([...initialEvents(), event], socket, true, navigate);
+    queueEvents([...initialEvents(), event], socket, true, navigate, params);
   });
 
   document.addEventListener("visibilitychange", checkVisibility);
@@ -801,6 +827,7 @@ export const useEventLoop = (
   const socket = useRef(null);
   const location = useLocation();
   const navigate = useNavigate();
+  const params = useParams();
   const prevLocationRef = useRef(location);
   const [searchParams] = useSearchParams();
   const [connectErrors, setConnectErrors] = useState([]);
@@ -842,11 +869,11 @@ export const useEventLoop = (
       // If debounce is used, queue the events after some delay
       debounce(
         combined_name,
-        () => queueEvents(_events, socket, false, navigate),
+        () => queueEvents(_events, socket, false, navigate, params),
         event_actions.debounce,
       );
     } else {
-      queueEvents(_events, socket, false, navigate);
+      queueEvents(_events, socket, false, navigate, params);
     }
   };
 
@@ -858,13 +885,14 @@ export const useEventLoop = (
           ...e,
           router_data: {
             pathname: location.pathname,
-            query: Object.fromEntries(searchParams.entries()),
+            query: { ...Object.fromEntries(searchParams.entries()), ...params },
             asPath: location.pathname + location.search,
           },
         })),
         socket,
         true,
         navigate,
+        params,
       );
       sentHydrate.current = true;
     }
@@ -912,6 +940,7 @@ export const useEventLoop = (
           setConnectErrors,
           client_storage,
           navigate,
+          params,
         );
       }
     }
@@ -933,7 +962,7 @@ export const useEventLoop = (
     (async () => {
       // Process all outstanding events.
       while (event_queue.length > 0 && !event_processing) {
-        await processEvent(socket.current, navigate);
+        await processEvent(socket.current, navigate, params);
       }
     })();
   });

reflex/compiler/utils.py

@@ -401,8 +401,6 @@ def _format_route_part(part: str) -> str:
 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"

reflex/constants/base.py

@@ -225,7 +225,7 @@ class ReactRouter(Javascript):
     """Constants related to React Router."""
 
     # The react router config file
-    CONFIG_FILE = "react-router-config.js"
+    CONFIG_FILE = "react-router.config.js"
 
     # Regex to check for message displayed when frontend comes up
     FRONTEND_LISTENING_REGEX = "Local:[\\s]+(.*)"

reflex/constants/installer.py

@@ -86,6 +86,18 @@ def _determine_nextjs_version() -> str:
     return default_version
 
 
+def _determine_react_router_version() -> str:
+    default_version = "7.5.3"
+    if (version := os.getenv("REACT_ROUTER_VERSION")) and version != default_version:
+        from reflex.utils import console
+
+        console.warn(
+            f"You have requested react-router@{version} but the supported version is {default_version}, abandon all hope ye who enter here."
+        )
+        return version
+    return default_version
+
+
 def _determine_react_version() -> str:
     default_version = "19.1.0"
     if (version := os.getenv("REACT_VERSION")) and version != default_version:
@@ -113,13 +125,15 @@ class Commands(SimpleNamespace):
 
     _react_version = _determine_react_version()
 
+    _react_router_version = _determine_react_router_version()
+
     DEPENDENCIES = {
         "axios": "1.9.0",
         "json5": "2.2.3",
-        "react-router": "7.5.0",
-        "react-router-dom": "7.5.0",
+        "react-router": _react_router_version,
+        "react-router-dom": _react_router_version,
         "react-helmet": "6.1.0",
-        "@react-router/node": "7.5.0",
+        "@react-router/node": _react_router_version,
         "serve": "14.2.4",
         "react": _react_version,
         "react-dom": _react_version,
@@ -132,8 +146,8 @@ class Commands(SimpleNamespace):
         "autoprefixer": "10.4.21",
         "postcss": "8.5.3",
         "postcss-import": "16.1.0",
-        "@react-router/dev": "7.5.0",
-        "@react-router/fs-routes": "7.5.0",
+        "@react-router/dev": _react_router_version,
+        "@react-router/fs-routes": _react_router_version,
         "vite-plugin-node-polyfills": "0.23.0",
         "vite": "6.2.6",
     }

tests/integration/test_client_storage.py

@@ -475,10 +475,10 @@ def set_sub_sub(var: str, value: str):
 
     # navigate to the /foo route
     with utils.poll_for_navigation(driver):
-        driver.get(client_side.frontend_url + "/foo")
+        driver.get(client_side.frontend_url.removesuffix("/") + "/foo/")
 
     # get new references to all cookie and local storage elements
-    c1 = driver.find_element(By.ID, "c1")
+    c1 = client_side.poll_for_result(lambda: driver.find_element(By.ID, "c1"))
     c2 = driver.find_element(By.ID, "c2")
     c3 = driver.find_element(By.ID, "c3")
     c4 = driver.find_element(By.ID, "c4")