todo: fix fetchers

Author: jacob-ebey

packages/react-router/lib/components.tsx

@@ -410,7 +410,6 @@ export function RouterProvider({
   unstable_transitions,
 }: RouterProviderProps): React.ReactElement {
   let [_state, setStateImpl] = React.useState(router.state);
-  let navigationRef = React.useRef(_state.navigation);
   let [pending, startTransition] = React.useTransition();
   // @ts-expect-error - Needs React 19 types
   let [state, setOptimisticState] = React.useOptimistic(_state);
@@ -490,13 +489,17 @@ export function RouterProvider({
         } else {
           startTransition(() => {
             if (unstable_transitions === true) {
-              if (newState.navigation.state !== "idle") {
-                navigationRef.current = newState.navigation;
-              }
-              setOptimisticState((state: any) => ({
+              // @ts-expect-error - Needs React 19 types
+              setOptimisticState((state) => ({
                 ...state,
-                navigation: navigationRef.current,
-                revalidation: newState.revalidation,
+                navigation:
+                  newState.navigation.state !== "idle"
+                    ? newState.navigation
+                    : state.navigation,
+                revalidation:
+                  newState.revalidation !== "idle"
+                    ? newState.revalidation
+                    : state.revalidation,
               }));
             }
             logErrorsAndSetState(newState);
@@ -599,9 +602,6 @@ export function RouterProvider({
         } else {
           startTransition(() => {
             if (unstable_transitions === true) {
-              if (newState.navigation.state !== "idle") {
-                navigationRef.current = newState.navigation;
-              }
               setOptimisticState((state: any) => ({
                 ...state,
                 navigation: newState.navigation,
@@ -666,7 +666,10 @@ export function RouterProvider({
           const resolver = new Deferred<void>();
           // @ts-expect-error - Needs React 19 types
           startTransition(() => {
-            return router.navigate(n).then(resolver.resolve, resolver.reject);
+            return router
+              .navigate(n)
+              .then(resolver.resolve)
+              .catch(resolver.reject);
           });
           return resolver.promise;
         }
@@ -752,14 +755,7 @@ export function RouterProvider({
                 <MemoizedDataRoutes
                   routes={router.routes}
                   future={router.future}
-                  state={
-                    pending
-                      ? {
-                          ...state,
-                          navigation: navigationRef.current,
-                        }
-                      : state
-                  }
+                  state={state}
                   unstable_onError={unstable_onError}
                 />
               </Router>

packages/react-router/lib/rsc/browser.tsx

@@ -138,7 +138,7 @@ export function createCallServer({
     });
 
     React.startTransition((): any =>
-      Promise.resolve(payloadPromise)
+      payloadPromise
         .then(async (payload) => {
           if (payload.type === "redirect") {
             if (payload.reload || isExternalLocation(payload.location)) {
@@ -178,14 +178,14 @@ export function createCallServer({
             }
 
             React.startTransition(() => {
-              let lastMatch: RSCRouteManifest | undefined;
               for (const match of rerender.matches) {
-                globalVar.__reactRouterDataRouter.patchRoutes(
-                  lastMatch?.id ?? null,
+                (
+                  window as WindowWithRouterGlobals
+                ).__reactRouterDataRouter.patchRoutes(
+                  match.parentId ?? null,
                   [createRouteFromServerManifest(match)],
                   true,
                 );
-                lastMatch = match;
               }
 
               (
@@ -746,32 +746,38 @@ export function RSCHydratedRouter({
     }
   }, []);
 
-  let [location, setLocation] = React.useState(router.state.location);
+  let [{ routes, state }, setState] = React.useState(() => ({
+    routes: cloneRoutes(router.routes),
+    state: router.state,
+  }));
 
-  const [cachedRoutes, setCachedRoutes] = React.useState(() =>
-    cloneRoutes(router.routes),
-  );
+  // const [cachedRoutes, setCachedRoutes] = React.useState(() =>
+  //   cloneRoutes(router.routes),
+  // );
   // const [cachedState, setCachedState] = React.useState(router.state);
 
   React.useLayoutEffect(
     () =>
       router.subscribe((newState) => {
         React.startTransition(() => {
-          setCachedRoutes(cloneRoutes(router.routes));
-          // setCachedState(newState);
-          if (newState.location !== location) {
-            setLocation(newState.location);
-          }
+          setState({
+            routes: cloneRoutes(router.routes),
+            state: newState,
+          });
         });
       }),
-    [router, location, cachedRoutes],
+    [router, location],
   );
 
-  const transitionEnabledRouter = {
-    ...router,
-    // state: cachedState,
-    routes: cachedRoutes,
-  } as typeof router;
+  const transitionEnabledRouter = React.useMemo(
+    () =>
+      ({
+        ...router,
+        state,
+        routes,
+      }) as typeof router,
+    [router, routes, state],
+  );
 
   React.useEffect(() => {
     if (
@@ -871,7 +877,7 @@ export function RSCHydratedRouter({
 
   return (
     <RSCRouterContext.Provider value={true}>
-      <RSCRouterGlobalErrorBoundary location={location}>
+      <RSCRouterGlobalErrorBoundary location={state.location}>
         <FrameworkContext.Provider value={frameworkContext}>
           <RouterProvider
             router={transitionEnabledRouter}

playground/rsc-vite/src/square.tsx

@@ -5,14 +5,14 @@ export function Square() {
   const left = Math.random() * 100;
 
   return (
-    <ViewTransition name="red-square">
-      <div
-        style={{
-          position: "relative",
-          height: "200px",
-          width: "100%",
-        }}
-      >
+    <div
+      style={{
+        position: "relative",
+        height: "200px",
+        width: "100%",
+      }}
+    >
+      <ViewTransition name="red-square">
         <div
           style={{
             position: "absolute",
@@ -24,7 +24,7 @@ export function Square() {
             transform: "translate(-50%, -50%)",
           }}
         />
-      </div>
-    </ViewTransition>
+      </ViewTransition>
+    </div>
   );
 }