diff --git a/.changeset/olive-planets-think.md b/.changeset/olive-planets-think.md
new file mode 100644
index 0000000000..484ee12b37
--- /dev/null
+++ b/.changeset/olive-planets-think.md
@@ -0,0 +1,23 @@
+---
+"react-router": patch
+---
+
+Add new `unstable_useTransitions` flag to routers to give users control over the usage of [`React.startTransition`](https://react.dev/reference/react/startTransition) and [`React.useOptimistic`](https://react.dev/reference/react/useOptimistic).
+
+- Framework Mode + Data Mode:
+  - `<HydratedRouter unstable_transition>`/`<RouterProvider unstable_transition>`
+  - When left unset (current default behavior), all state updates are wrapped in `React.startTransition`
+    - ⚠️ This can lead to buggy behaviors if you are wrapping your own navigations/fetchers in `React.startTransition`
+    - You should set the flag to `true` if you run into this scenario
+  - When set to `true`, all router navigations and state changes will be wrapped
+    in `React.startTransition` and router state changes will _also_ be sent through
+    `React.useOptimistic` to surface mid-navigation router state changes to the UI (i.e., `useNavigation()`)
+  - When set to `false`, the router will not leverage `React.startTransition` or
+    `React.useOptimistic` on any navigations or state changes
+- Declarative Mode
+  - `<BrowserRouter unstable_useTransitions>`
+  - When left unset, all router state updates are wrapped in `React.startTransition`
+  - When set to `true`, all router navigations and state updates will be wrapped
+    in `React.startTransition`
+  - When set to `false`, the router will not leverage `React.startTransition` on
+    any navigations or state changes
diff --git a/packages/react-router/__tests__/react-transitions-test.tsx b/packages/react-router/__tests__/react-transitions-test.tsx
new file mode 100644
index 0000000000..a70d470092
--- /dev/null
+++ b/packages/react-router/__tests__/react-transitions-test.tsx
@@ -0,0 +1,636 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryRouter,
+  useLoaderData,
+  useNavigation,
+} from "react-router";
+
+import { useNavigate, useSubmit } from "../index";
+import { createDeferred, tick } from "./router/utils/utils";
+
+describe("react transitions", () => {
+  describe("<RouterProvider transitions={undefined} />", () => {
+    it("normal navigations surface all updates", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button id="increment" onClick={() => setCount((c) => c + 1)}>
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let navigate = useNavigate();
+                return (
+                  <button id="link" onClick={() => navigate("/page")}>
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#link")!);
+      // Without useOptimistic under the hood, our mid-navigation state updates don't surface
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:1"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:loading")).toBeDefined();
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+
+    it("normal submissions surface all updates", async () => {
+      let actionDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button id="increment" onClick={() => setCount((c) => c + 1)}>
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let submit = useSubmit();
+                return (
+                  <button
+                    id="submit"
+                    onClick={() =>
+                      submit({}, { method: "post", action: "/page" })
+                    }
+                  >
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#submit")!);
+      await waitFor(() => screen.getByText("Navigation:submitting"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:1"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:submitting")).toBeDefined();
+
+      actionDfd.resolve("Action");
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:3"));
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:3"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+
+    it("navigations can be manually wrapped in startTransition (buggy optimistic behavior)", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let navigate = useNavigate();
+                return (
+                  <button
+                    id="link"
+                    onClick={() => {
+                      // @ts-expect-error - Needs react 19 types
+                      React.startTransition(() => navigate("/page"));
+                    }}
+                  >
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      // Without useOptimistic under the hood, our mid-navigation state updates
+      // don't surface
+      await fireEvent.click(container.querySelector("#link")!);
+      await waitFor(() => screen.getByText("Navigation:idle"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+
+    it("submissions can be manually wrapped in startTransition (buggy optimistic behavior)", async () => {
+      let actionDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let submit = useSubmit();
+                return (
+                  <button
+                    id="submit"
+                    onClick={() => {
+                      React.startTransition(() =>
+                        // @ts-expect-error - Needs react 19 types
+                        submit({}, { method: "post", action: "/page" }),
+                      );
+                    }}
+                  >
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      // Without useOptimistic under the hood, our mid-navigation state updates
+      // don't surface
+      await fireEvent.click(container.querySelector("#submit")!);
+      await waitFor(() => screen.getByText("Navigation:idle"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+
+      await act(() => {
+        actionDfd.resolve("Action");
+      });
+      await tick();
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:3"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+  });
+
+  describe("<RouterProvider transitions={false} />", () => {
+    it("navigations are not transition-enabled", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let navigate = useNavigate();
+                return (
+                  <button id="link" onClick={() => navigate("/page")}>
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={false} />,
+      );
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      // Without transitions enabled, all updates surface during navigation
+      await fireEvent.click(container.querySelector("#link")!);
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:1"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:loading")).toBeDefined();
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+
+    it("submissions are not transition-enabled", async () => {
+      let actionDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let submit = useSubmit();
+                return (
+                  <button
+                    id="submit"
+                    onClick={() =>
+                      submit({}, { method: "post", action: "/page" })
+                    }
+                  >
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      // Without transitions enabled, all updates surface during navigation
+      await fireEvent.click(container.querySelector("#submit")!);
+      await waitFor(() => screen.getByText("Navigation:submitting"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:1"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:submitting")).toBeDefined();
+
+      actionDfd.resolve("Action");
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:3"));
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:3"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+  });
+
+  describe("<RouterProvider transitions={true} />", () => {
+    it("navigations are transition-enabled", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let navigate = useNavigate();
+                return (
+                  <button id="link" onClick={() => navigate("/page")}>
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      // With transitions enabled, our updates surface via useOptimistic, but
+      // other transition-enabled updates do not
+      await fireEvent.click(container.querySelector("#link")!);
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      expect(screen.getByText("Navigation:loading")).toBeDefined();
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+
+    it("submissions are transition-enabled", async () => {
+      let actionDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                let submit = useSubmit();
+                return (
+                  <button
+                    id="submit"
+                    onClick={() =>
+                      submit({}, { method: "post", action: "/page" })
+                    }
+                  >
+                    Go to page
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Go to page"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      // Without transitions enabled, all updates surface during navigation
+      await fireEvent.click(container.querySelector("#submit")!);
+      await waitFor(() => screen.getByText("Navigation:submitting"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+      expect(screen.getByText("Navigation:submitting")).toBeDefined();
+
+      actionDfd.resolve("Action");
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      await fireEvent.click(container.querySelector("#increment")!);
+      await waitFor(() => screen.getByText("Increment:0"));
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      await waitFor(() => screen.getByText("Increment:3"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+  });
+});
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index 4be51e5cc5..954436fd17 100644
--- a/packages/react-router/lib/components.tsx
+++ b/packages/react-router/lib/components.tsx
@@ -69,12 +69,33 @@ import {
 } from "./hooks";
 import type { ViewTransition } from "./dom/global";
 import { warnOnce } from "./server-runtime/warnings";
-import type {
-  unstable_ClientInstrumentation,
-  unstable_InstrumentRouteFunction,
-  unstable_InstrumentRouterFunction,
-} from "./router/instrumentation";
-import { instrumentClientSideRouter } from "./router/instrumentation";
+import type { unstable_ClientInstrumentation } from "./router/instrumentation";
+
+/**
+ * Webpack can fail to compile on against react versions without this export
+ * complains that `startTransition` doesn't exist in `React`.
+ *
+ * Using the string constant directly at runtime fixes the webpack build issue
+ * but can result in terser stripping the actual call at minification time.
+ *
+ * Grabbing an exported reference once up front resolves that issue.
+ *
+ * See https://github.com/remix-run/react-router/issues/10579
+ */
+const USE_OPTIMISTIC = "useOptimistic";
+// @ts-expect-error Needs React 19 types but we develop against 18
+const useOptimisticImpl = React[USE_OPTIMISTIC];
+
+function useOptimisticSafe<T>(
+  val: T,
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  if (useOptimisticImpl) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useOptimisticImpl(val);
+  } else {
+    return [val, () => undefined];
+  }
+}
 
 export function mapRouteProperties(route: RouteObject) {
   let updates: Partial<RouteObject> & { hasErrorBoundary: boolean } = {
@@ -354,143 +375,21 @@ export interface RouterProviderProps {
    * ```
    */
   unstable_onError?: unstable_ClientOnErrorFunction;
-}
-
-function shallowDiff(a: any, b: any) {
-  if (a === b) {
-    return false;
-  }
-  let aKeys = Object.keys(a);
-  let bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) {
-    return true;
-  }
-  for (let key of aKeys) {
-    if (a[key] !== b[key]) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function UNSTABLE_TransitionEnabledRouterProvider({
-  router,
-  flushSync: reactDomFlushSyncImpl,
-  unstable_onError,
-}: RouterProviderProps) {
-  let fetcherData = React.useRef<Map<string, any>>(new Map());
-  let [revalidating, startRevalidation] = React.useTransition();
-  let [state, setState] = React.useState(router.state);
-
-  (router as any).__setPendingRerender = (promise: Promise<() => void>) =>
-    startRevalidation(
-      // @ts-expect-error - need react 19 types for this to be async
-      async () => {
-        const rerender = await promise;
-        startRevalidation(() => {
-          rerender();
-        });
-      },
-    );
-
-  let navigator = React.useMemo((): Navigator => {
-    return {
-      createHref: router.createHref,
-      encodeLocation: router.encodeLocation,
-      go: (n) => router.navigate(n),
-      push: (to, state, opts) =>
-        router.navigate(to, {
-          state,
-          preventScrollReset: opts?.preventScrollReset,
-        }),
-      replace: (to, state, opts) =>
-        router.navigate(to, {
-          replace: true,
-          state,
-          preventScrollReset: opts?.preventScrollReset,
-        }),
-    };
-  }, [router]);
-
-  let basename = router.basename || "/";
-
-  let dataRouterContext = React.useMemo(
-    () => ({
-      router,
-      navigator,
-      static: false,
-      basename,
-      unstable_onError,
-    }),
-    [router, navigator, basename, unstable_onError],
-  );
-
-  React.useLayoutEffect(() => {
-    return router.subscribe(
-      (newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {
-        newState.fetchers.forEach((fetcher, key) => {
-          if (fetcher.data !== undefined) {
-            fetcherData.current.set(key, fetcher.data);
-          }
-        });
-        deletedFetchers.forEach((key) => fetcherData.current.delete(key));
-
-        const diff = shallowDiff(state, newState);
-
-        if (!diff) return;
-
-        if (flushSync) {
-          if (reactDomFlushSyncImpl) {
-            reactDomFlushSyncImpl(() => setState(newState));
-          } else {
-            setState(newState);
-          }
-        } else {
-          React.startTransition(() => {
-            setState(newState);
-          });
-        }
-      },
-    );
-  }, [router, reactDomFlushSyncImpl, state]);
-
-  // The fragment and {null} here are important!  We need them to keep React 18's
-  // useId happy when we are server-rendering since we may have a <script> here
-  // containing the hydrated server-side staticContext (from StaticRouterProvider).
-  // useId relies on the component tree structure to generate deterministic id's
-  // so we need to ensure it remains the same on the client even though
-  // we don't need the <script> tag
-  return (
-    <>
-      <DataRouterContext.Provider value={dataRouterContext}>
-        <DataRouterStateContext.Provider
-          value={{
-            ...state,
-            revalidation: revalidating ? "loading" : state.revalidation,
-          }}
-        >
-          <FetchersContext.Provider value={fetcherData.current}>
-            {/* <ViewTransitionContext.Provider value={vtContext}> */}
-            <Router
-              basename={basename}
-              location={state.location}
-              navigationType={state.historyAction}
-              navigator={navigator}
-            >
-              <MemoizedDataRoutes
-                routes={router.routes}
-                future={router.future}
-                state={state}
-                unstable_onError={unstable_onError}
-              />
-            </Router>
-            {/* </ViewTransitionContext.Provider> */}
-          </FetchersContext.Provider>
-        </DataRouterStateContext.Provider>
-      </DataRouterContext.Provider>
-      {null}
-    </>
-  );
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   *
+   * - When left `undefined` `undefined`, all state updates are wrapped in
+   *   `React.startTransition`. This can lead to buggy behaviors if you are
+   *   wrapping your own navigations/fetchers in `React.startTransition`.
+   * - When set to true, all router navigations and state changes will be wrapped
+   *   in `React.startTransition` and state change swill also be sent through
+   *   [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
+   *   surface mid-navigation router state changes to the UI
+   * - When set to `false`, the router will not leverage `React.startTransition` or
+   *   `React.useOptimistic` on navigations or state changes.
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -522,14 +421,17 @@ export function UNSTABLE_TransitionEnabledRouterProvider({
  * @param {RouterProviderProps.flushSync} props.flushSync n/a
  * @param {RouterProviderProps.unstable_onError} props.unstable_onError n/a
  * @param {RouterProviderProps.router} props.router n/a
+ * @param {RouterProviderProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @returns React element for the rendered router
  */
 export function RouterProvider({
   router,
   flushSync: reactDomFlushSyncImpl,
   unstable_onError,
+  unstable_useTransitions,
 }: RouterProviderProps): React.ReactElement {
-  let [state, setStateImpl] = React.useState(router.state);
+  let [_state, setStateImpl] = React.useState(router.state);
+  let [state, setOptimisticState] = useOptimisticSafe(_state);
   let [pendingState, setPendingState] = React.useState<RouterState>();
   let [vtContext, setVtContext] = React.useState<ViewTransitionContextObject>({
     isTransitioning: false,
@@ -601,8 +503,15 @@ export function RouterProvider({
       if (!viewTransitionOpts || !isViewTransitionAvailable) {
         if (reactDomFlushSyncImpl && flushSync) {
           reactDomFlushSyncImpl(() => logErrorsAndSetState(newState));
+        } else if (unstable_useTransitions === false) {
+          logErrorsAndSetState(newState);
         } else {
-          React.startTransition(() => logErrorsAndSetState(newState));
+          React.startTransition(() => {
+            if (unstable_useTransitions === true) {
+              setOptimisticState((s) => getOptimisticRouterState(s, newState));
+            }
+            logErrorsAndSetState(newState);
+          });
         }
         return;
       }
@@ -671,6 +580,8 @@ export function RouterProvider({
       transition,
       renderDfd,
       logErrorsAndSetState,
+      unstable_useTransitions,
+      setOptimisticState,
     ],
   );
 
@@ -694,7 +605,16 @@ export function RouterProvider({
       let newState = pendingState;
       let renderPromise = renderDfd.promise;
       let transition = router.window.document.startViewTransition(async () => {
-        React.startTransition(() => logErrorsAndSetState(newState));
+        if (unstable_useTransitions === false) {
+          logErrorsAndSetState(newState);
+        } else {
+          React.startTransition(() => {
+            if (unstable_useTransitions === true) {
+              setOptimisticState((s) => getOptimisticRouterState(s, newState));
+            }
+            logErrorsAndSetState(newState);
+          });
+        }
         await renderPromise;
       });
       transition.finished.finally(() => {
@@ -705,7 +625,14 @@ export function RouterProvider({
       });
       setTransition(transition);
     }
-  }, [pendingState, renderDfd, router.window, logErrorsAndSetState]);
+  }, [
+    pendingState,
+    renderDfd,
+    router.window,
+    logErrorsAndSetState,
+    unstable_useTransitions,
+    setOptimisticState,
+  ]);
 
   // When the new location finally renders and is committed to the DOM, this
   // effect will run to resolve the transition
@@ -783,6 +710,7 @@ export function RouterProvider({
                 location={state.location}
                 navigationType={state.historyAction}
                 navigator={navigator}
+                unstable_useTransitions={unstable_useTransitions === true}
               >
                 <MemoizedDataRoutes
                   routes={router.routes}
@@ -800,6 +728,33 @@ export function RouterProvider({
   );
 }
 
+function getOptimisticRouterState(
+  currentState: RouterState,
+  newState: RouterState,
+): RouterState {
+  return {
+    // Don't surface "current location specific" stuff mid-navigation
+    // (historyAction, location, matches, loaderData, errors, initialized,
+    // restoreScroll, preventScrollReset, blockers, etc.)
+    ...currentState,
+    // Only surface "pending/in-flight stuff"
+    // (navigation, revalidation, actionData, fetchers, )
+    navigation:
+      newState.navigation.state !== "idle"
+        ? newState.navigation
+        : currentState.navigation,
+    revalidation:
+      newState.revalidation !== "idle"
+        ? newState.revalidation
+        : currentState.revalidation,
+    actionData:
+      newState.navigation.state !== "submitting"
+        ? newState.actionData
+        : currentState.actionData,
+    fetchers: newState.fetchers,
+  };
+}
+
 // Memoize to avoid re-renders when updating `ViewTransitionContext`
 const MemoizedDataRoutes = React.memo(DataRoutes);
 
@@ -837,6 +792,12 @@ export interface MemoryRouterProps {
    * Index of `initialEntries` the application should initialize to
    */
   initialIndex?: number;
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   * Enabled by default.
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -850,6 +811,7 @@ export interface MemoryRouterProps {
  * @param {MemoryRouterProps.children} props.children n/a
  * @param {MemoryRouterProps.initialEntries} props.initialEntries n/a
  * @param {MemoryRouterProps.initialIndex} props.initialIndex n/a
+ * @param {MemoryRouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @returns A declarative in-memory {@link Router | `<Router>`} for client-side
  * routing.
  */
@@ -858,6 +820,7 @@ export function MemoryRouter({
   children,
   initialEntries,
   initialIndex,
+  unstable_useTransitions,
 }: MemoryRouterProps): React.ReactElement {
   let historyRef = React.useRef<MemoryHistory>();
   if (historyRef.current == null) {
@@ -875,9 +838,13 @@ export function MemoryRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      React.startTransition(() => setStateImpl(newState));
+      if (unstable_useTransitions === false) {
+        setStateImpl(newState);
+      } else {
+        React.startTransition(() => setStateImpl(newState));
+      }
     },
-    [setStateImpl],
+    [unstable_useTransitions],
   );
 
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
@@ -889,6 +856,7 @@ export function MemoryRouter({
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1302,6 +1270,10 @@ export interface RouterProps {
    * will not be reactive to location changes.
    */
   static?: boolean;
+  /**
+   * Whether this router should wrap navigations in `React.startTransition()`
+   */
+  unstable_useTransitions: boolean;
 }
 
 /**
@@ -1321,6 +1293,7 @@ export interface RouterProps {
  * @param {RouterProps.navigationType} props.navigationType n/a
  * @param {RouterProps.navigator} props.navigator n/a
  * @param {RouterProps.static} props.static n/a
+ * @param {RouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @returns React element for the rendered router or `null` if the location does
  * not match the {@link props.basename}
  */
@@ -1331,6 +1304,7 @@ export function Router({
   navigationType = NavigationType.Pop,
   navigator,
   static: staticProp = false,
+  unstable_useTransitions,
 }: RouterProps): React.ReactElement | null {
   invariant(
     !useInRouterContext(),
@@ -1346,9 +1320,10 @@ export function Router({
       basename,
       navigator,
       static: staticProp,
+      unstable_useTransitions,
       future: {},
     }),
-    [basename, navigator, staticProp],
+    [basename, navigator, staticProp, unstable_useTransitions],
   );
 
   if (typeof locationProp === "string") {
diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
index fa00d6c6a2..457f3288f4 100644
--- a/packages/react-router/lib/context.ts
+++ b/packages/react-router/lib/context.ts
@@ -85,10 +85,14 @@ export type PatchRoutesOnNavigationFunctionArgs =
 export type PatchRoutesOnNavigationFunction =
   AgnosticPatchRoutesOnNavigationFunction<RouteObject, RouteMatch>;
 
+// TODO: Does this need to extend?  We can probably just leverage the stuff on
+// NavigationContext and add a few invariants for hooks that must be used in a
+// data router
 export interface DataRouterContextObject
   // Omit `future` since those can be pulled from the `router`
-  // `NavigationContext` needs future since it doesn't have a `router` in all cases
-  extends Omit<NavigationContextObject, "future"> {
+  // `NavigationContext` needs `future`/`unstable_useTransitions` since it doesn't
+  // have a `router` in all cases
+  extends Omit<NavigationContextObject, "future" | "unstable_useTransitions"> {
   router: Router;
   staticContext?: StaticHandlerContext;
   unstable_onError?: unstable_ClientOnErrorFunction;
@@ -178,6 +182,7 @@ interface NavigationContextObject {
   basename: string;
   navigator: Navigator;
   static: boolean;
+  unstable_useTransitions: boolean;
   // TODO: Re-introduce a singular `FutureConfig` once we land our first
   // future.unstable_ or future.v8_ flag
   future: {};
diff --git a/packages/react-router/lib/dom-export/hydrated-router.tsx b/packages/react-router/lib/dom-export/hydrated-router.tsx
index ba2c81012c..67ebfedf2f 100644
--- a/packages/react-router/lib/dom-export/hydrated-router.tsx
+++ b/packages/react-router/lib/dom-export/hydrated-router.tsx
@@ -298,6 +298,21 @@ export interface HydratedRouterProps {
    * ```
    */
   unstable_onError?: unstable_ClientOnErrorFunction;
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   *
+   * - When left `undefined` `undefined`, all state updates are wrapped in
+   *   `React.startTransition`. This can lead to buggy behaviors if you are
+   *   wrapping your own navigations/fetchers in `React.startTransition`.
+   * - When set to true, all router navigations and state changes will be wrapped
+   *   in `React.startTransition` and state change swill also be sent through
+   *   [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
+   *   surface mid-navigation router state changes to the UI
+   * - When set to `false`, the router will not leverage `React.startTransition` or
+   *   `React.useOptimistic` on navigations or state changes.
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -404,6 +419,7 @@ export function HydratedRouter(props: HydratedRouterProps) {
         <RemixErrorBoundary location={location}>
           <RouterProvider
             router={router}
+            unstable_useTransitions={props.unstable_useTransitions}
             unstable_onError={props.unstable_onError}
           />
         </RemixErrorBoundary>
diff --git a/packages/react-router/lib/dom/lib.tsx b/packages/react-router/lib/dom/lib.tsx
index cff63d829d..bf0c70438d 100644
--- a/packages/react-router/lib/dom/lib.tsx
+++ b/packages/react-router/lib/dom/lib.tsx
@@ -932,6 +932,12 @@ export interface BrowserRouterProps {
    * {@link Route | `<Route>`} components describing your route configuration
    */
   children?: React.ReactNode;
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   * Enabled by default.
+   */
+  unstable_useTransitions?: boolean;
   /**
    * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
    * override. Defaults to the global `window` instance
@@ -949,6 +955,7 @@ export interface BrowserRouterProps {
  * @param props Props
  * @param {BrowserRouterProps.basename} props.basename n/a
  * @param {BrowserRouterProps.children} props.children n/a
+ * @param {BrowserRouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @param {BrowserRouterProps.window} props.window n/a
  * @returns A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
  * API for client-side routing.
@@ -956,6 +963,7 @@ export interface BrowserRouterProps {
 export function BrowserRouter({
   basename,
   children,
+  unstable_useTransitions,
   window,
 }: BrowserRouterProps) {
   let historyRef = React.useRef<BrowserHistory>();
@@ -970,9 +978,13 @@ export function BrowserRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      React.startTransition(() => setStateImpl(newState));
+      if (unstable_useTransitions === false) {
+        setStateImpl(newState);
+      } else {
+        React.startTransition(() => setStateImpl(newState));
+      }
     },
-    [setStateImpl],
+    [unstable_useTransitions],
   );
 
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
@@ -984,6 +996,7 @@ export function BrowserRouter({
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1000,6 +1013,12 @@ export interface HashRouterProps {
    * {@link Route | `<Route>`} components describing your route configuration
    */
   children?: React.ReactNode;
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   * Enabled by default.
+   */
+  unstable_useTransitions?: boolean;
   /**
    * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
    * override. Defaults to the global `window` instance
@@ -1018,11 +1037,17 @@ export interface HashRouterProps {
  * @param props Props
  * @param {HashRouterProps.basename} props.basename n/a
  * @param {HashRouterProps.children} props.children n/a
+ * @param {HashRouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @param {HashRouterProps.window} props.window n/a
  * @returns A declarative {@link Router | `<Router>`} using the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
  * for client-side routing.
  */
-export function HashRouter({ basename, children, window }: HashRouterProps) {
+export function HashRouter({
+  basename,
+  children,
+  unstable_useTransitions,
+  window,
+}: HashRouterProps) {
   let historyRef = React.useRef<HashHistory>();
   if (historyRef.current == null) {
     historyRef.current = createHashHistory({ window, v5Compat: true });
@@ -1035,9 +1060,13 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      React.startTransition(() => setStateImpl(newState));
+      if (unstable_useTransitions === false) {
+        setStateImpl(newState);
+      } else {
+        React.startTransition(() => setStateImpl(newState));
+      }
     },
-    [setStateImpl],
+    [unstable_useTransitions],
   );
 
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
@@ -1049,6 +1078,7 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1069,6 +1099,12 @@ export interface HistoryRouterProps {
    *  A {@link History} implementation for use by the router
    */
   history: History;
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   * Enabled by default.
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -1086,6 +1122,7 @@ export interface HistoryRouterProps {
  * @param {HistoryRouterProps.basename} props.basename n/a
  * @param {HistoryRouterProps.children} props.children n/a
  * @param {HistoryRouterProps.history} props.history n/a
+ * @param {HistoryRouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @returns A declarative {@link Router | `<Router>`} using the provided history
  * implementation for client-side routing.
  */
@@ -1093,6 +1130,7 @@ export function HistoryRouter({
   basename,
   children,
   history,
+  unstable_useTransitions,
 }: HistoryRouterProps) {
   let [state, setStateImpl] = React.useState({
     action: history.action,
@@ -1100,9 +1138,13 @@ export function HistoryRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      React.startTransition(() => setStateImpl(newState));
+      if (unstable_useTransitions === false) {
+        setStateImpl(newState);
+      } else {
+        React.startTransition(() => setStateImpl(newState));
+      }
     },
-    [setStateImpl],
+    [unstable_useTransitions],
   );
 
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
@@ -1114,6 +1156,7 @@ export function HistoryRouter({
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1338,7 +1381,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     },
     forwardedRef,
   ) {
-    let { basename } = React.useContext(NavigationContext);
+    let { basename, unstable_useTransitions } =
+      React.useContext(NavigationContext);
     let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
 
     // Rendered into <a href> for absolute URLs
@@ -1389,6 +1433,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       preventScrollReset,
       relative,
       viewTransition,
+      unstable_useTransitions,
     });
     function handleClick(
       event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -1932,6 +1977,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
     },
     forwardedRef,
   ) => {
+    let { unstable_useTransitions } = React.useContext(NavigationContext);
     let submit = useSubmit();
     let formAction = useFormAction(action, { relative });
     let formMethod: HTMLFormMethod =
@@ -1951,16 +1997,24 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
         (submitter?.getAttribute("formmethod") as HTMLFormMethod | undefined) ||
         method;
 
-      submit(submitter || event.currentTarget, {
-        fetcherKey,
-        method: submitMethod,
-        navigate,
-        replace,
-        state,
-        relative,
-        preventScrollReset,
-        viewTransition,
-      });
+      let doSubmit = () =>
+        submit(submitter || event.currentTarget, {
+          fetcherKey,
+          method: submitMethod,
+          navigate,
+          replace,
+          state,
+          relative,
+          preventScrollReset,
+          viewTransition,
+        });
+
+      if (unstable_useTransitions && navigate === true) {
+        // @ts-expect-error Needs React 19 types
+        React.startTransition(() => doSubmit());
+      } else {
+        doSubmit();
+      }
     };
 
     return (
@@ -2175,6 +2229,9 @@ function useDataRouterState(hookName: DataRouterStateHook) {
  * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
  * for this navigation. To apply specific styles during the transition, see
  * {@link useViewTransitionState}. Defaults to `false`.
+ * @param options.unstable_useTransitions Wraps the navigation in
+ * [`React.startTransition`](https://react.dev/reference/react/startTransition)
+ * for concurrent rendering. Defaults to `false`.
  * @returns A click handler function that can be used in a custom {@link Link} component.
  */
 export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
@@ -2186,6 +2243,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     preventScrollReset,
     relative,
     viewTransition,
+    unstable_useTransitions,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
@@ -2193,6 +2251,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
     viewTransition?: boolean;
+    unstable_useTransitions?: boolean;
   } = {},
 ): (event: React.MouseEvent<E, MouseEvent>) => void {
   let navigate = useNavigate();
@@ -2211,13 +2270,21 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
             ? replaceProp
             : createPath(location) === createPath(path);
 
-        navigate(to, {
-          replace,
-          state,
-          preventScrollReset,
-          relative,
-          viewTransition,
-        });
+        let doNavigate = () =>
+          navigate(to, {
+            replace,
+            state,
+            preventScrollReset,
+            relative,
+            viewTransition,
+          });
+
+        if (unstable_useTransitions) {
+          // @ts-expect-error Needs React 19 types
+          React.startTransition(() => doNavigate());
+        } else {
+          doNavigate();
+        }
       }
     },
     [
@@ -2231,6 +2298,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
       preventScrollReset,
       relative,
       viewTransition,
+      unstable_useTransitions,
     ],
   );
 }
@@ -2535,7 +2603,9 @@ let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
  * @returns A function that can be called to submit a {@link Form} imperatively.
  */
 export function useSubmit(): SubmitFunction {
-  let { router } = useDataRouterContext(DataRouterHook.UseSubmit);
+  let {
+    router: { fetch: routerFetch, navigate },
+  } = useDataRouterContext(DataRouterHook.UseSubmit);
   let { basename } = React.useContext(NavigationContext);
   let currentRouteId = useRouteId();
 
@@ -2548,7 +2618,7 @@ export function useSubmit(): SubmitFunction {
 
       if (options.navigate === false) {
         let key = options.fetcherKey || getUniqueFetcherId();
-        await router.fetch(key, currentRouteId, options.action || action, {
+        await routerFetch(key, currentRouteId, options.action || action, {
           preventScrollReset: options.preventScrollReset,
           formData,
           body,
@@ -2557,7 +2627,7 @@ export function useSubmit(): SubmitFunction {
           flushSync: options.flushSync,
         });
       } else {
-        await router.navigate(options.action || action, {
+        await navigate(options.action || action, {
           preventScrollReset: options.preventScrollReset,
           formData,
           body,
@@ -2571,7 +2641,7 @@ export function useSubmit(): SubmitFunction {
         });
       }
     },
-    [router, basename, currentRouteId],
+    [routerFetch, navigate, basename, currentRouteId],
   );
 }
 
@@ -2848,7 +2918,9 @@ export function useFetcher<T = any>({
 }: {
   key?: string;
 } = {}): FetcherWithComponents<SerializeFrom<T>> {
-  let { router } = useDataRouterContext(DataRouterHook.UseFetcher);
+  let {
+    router: { deleteFetcher, getFetcher, resetFetcher, fetch: routerFetch },
+  } = useDataRouterContext(DataRouterHook.UseFetcher);
   let state = useDataRouterState(DataRouterStateHook.UseFetcher);
   let fetcherData = React.useContext(FetchersContext);
   let route = React.useContext(RouteContext);
@@ -2870,17 +2942,17 @@ export function useFetcher<T = any>({
 
   // Registration/cleanup
   React.useEffect(() => {
-    router.getFetcher(fetcherKey);
-    return () => router.deleteFetcher(fetcherKey);
-  }, [router, fetcherKey]);
+    getFetcher(fetcherKey);
+    return () => deleteFetcher(fetcherKey);
+  }, [deleteFetcher, getFetcher, fetcherKey]);
 
   // Fetcher additions
   let load = React.useCallback(
     async (href: string, opts?: { flushSync?: boolean }) => {
       invariant(routeId, "No routeId available for fetcher.load()");
-      await router.fetch(fetcherKey, routeId, href, opts);
+      await routerFetch(fetcherKey, routeId, href, opts);
     },
-    [fetcherKey, routeId, router],
+    [fetcherKey, routeId, routerFetch],
   );
 
   let submitImpl = useSubmit();
@@ -2897,7 +2969,7 @@ export function useFetcher<T = any>({
 
   let unstable_reset = React.useCallback<
     FetcherWithComponents<T>["unstable_reset"]
-  >((opts) => router.resetFetcher(fetcherKey, opts), [router, fetcherKey]);
+  >((opts) => resetFetcher(fetcherKey, opts), [resetFetcher, fetcherKey]);
 
   let FetcherForm = React.useMemo(() => {
     let FetcherForm = React.forwardRef<HTMLFormElement, FetcherFormProps>(
diff --git a/packages/react-router/lib/dom/server.tsx b/packages/react-router/lib/dom/server.tsx
index 5185d7cd3f..7653755af3 100644
--- a/packages/react-router/lib/dom/server.tsx
+++ b/packages/react-router/lib/dom/server.tsx
@@ -94,6 +94,7 @@ export function StaticRouter({
       navigationType={action}
       navigator={staticNavigator}
       static={true}
+      unstable_useTransitions={false}
     />
   );
 }
@@ -204,6 +205,7 @@ export function StaticRouterProvider({
                 navigationType={state.historyAction}
                 navigator={dataRouterContext.navigator}
                 static={dataRouterContext.static}
+                unstable_useTransitions={false}
               >
                 <DataRoutes
                   routes={router.routes}
diff --git a/packages/react-router/lib/rsc/browser.tsx b/packages/react-router/lib/rsc/browser.tsx
index 5046e28179..0fbc3448b6 100644
--- a/packages/react-router/lib/rsc/browser.tsx
+++ b/packages/react-router/lib/rsc/browser.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import { UNSTABLE_TransitionEnabledRouterProvider as RouterProvider } from "../components";
+import { RouterProvider } from "../components";
 import {
   RSCRouterContext,
   type DataRouteMatch,
@@ -18,6 +18,7 @@ import type {
   RSCRenderPayload,
 } from "./server.rsc";
 import type {
+  AgnosticDataRouteObject,
   DataStrategyFunction,
   DataStrategyFunctionArgs,
   RouterContextProvider,
@@ -136,20 +137,22 @@ export function createCallServer({
       }) as Promise<RSCPayload>;
     });
 
-    (globalVar.__reactRouterDataRouter as any).__setPendingRerender(
+    React.startTransition(() =>
+      // @ts-expect-error - Needs React 19 types
       Promise.resolve(payloadPromise)
         .then(async (payload) => {
           if (payload.type === "redirect") {
             if (payload.reload || isExternalLocation(payload.location)) {
               window.location.href = payload.location;
-              return () => {};
+              return;
             }
 
-            return () => {
+            React.startTransition(() => {
               globalVar.__reactRouterDataRouter.navigate(payload.location, {
                 replace: payload.replace,
               });
-            };
+            });
+            return;
           }
 
           if (payload.type !== "action") {
@@ -167,14 +170,15 @@ export function createCallServer({
                 window.location.href = rerender.location;
                 return;
               }
-              return () => {
+              React.startTransition(() => {
                 globalVar.__reactRouterDataRouter.navigate(rerender.location, {
                   replace: rerender.replace,
                 });
-              };
+              });
+              return;
             }
 
-            return () => {
+            React.startTransition(() => {
               let lastMatch: RSCRouteManifest | undefined;
               for (const match of rerender.matches) {
                 globalVar.__reactRouterDataRouter.patchRoutes(
@@ -203,10 +207,8 @@ export function createCallServer({
                     : null,
                 },
               );
-            };
+            });
           }
-
-          return () => {};
         })
         .catch(() => {}),
     );
@@ -490,20 +492,23 @@ export function getRSCSingleFetchDataStrategy(
         }
         renderedRoutesById.get(route.id)!.push(route);
       }
-      for (const match of args.matches) {
-        const renderedRoutes = renderedRoutesById.get(match.route.id);
-        if (renderedRoutes) {
-          for (const rendered of renderedRoutes) {
-            (
-              window as WindowWithRouterGlobals
-            ).__reactRouterDataRouter.patchRoutes(
-              rendered.parentId ?? null,
-              [createRouteFromServerManifest(rendered)],
-              true,
-            );
+
+      React.startTransition(() => {
+        for (const match of args.matches) {
+          const renderedRoutes = renderedRoutesById.get(match.route.id);
+          if (renderedRoutes) {
+            for (const rendered of renderedRoutes) {
+              (
+                window as WindowWithRouterGlobals
+              ).__reactRouterDataRouter.patchRoutes(
+                rendered.parentId ?? null,
+                [createRouteFromServerManifest(rendered)],
+                true,
+              );
+            }
           }
         }
-      }
+      });
       return results;
     });
 }
@@ -707,16 +712,33 @@ export function RSCHydratedRouter({
     }
   }, []);
 
-  let [location, setLocation] = React.useState(router.state.location);
+  let [{ routes, state }, setState] = React.useState(() => ({
+    routes: cloneRoutes(router.routes),
+    state: router.state,
+  }));
 
   React.useLayoutEffect(
     () =>
       router.subscribe((newState) => {
-        if (newState.location !== location) {
-          setLocation(newState.location);
-        }
+        if (diffRoutes(router.routes, routes))
+          React.startTransition(() => {
+            setState({
+              routes: cloneRoutes(router.routes),
+              state: newState,
+            });
+          });
       }),
-    [router, location],
+    [router.subscribe, routes, router],
+  );
+
+  const transitionEnabledRouter = React.useMemo(
+    () =>
+      ({
+        ...router,
+        state,
+        routes,
+      }) as typeof router,
+    [router, routes, state],
   );
 
   React.useEffect(() => {
@@ -817,9 +839,13 @@ export function RSCHydratedRouter({
 
   return (
     <RSCRouterContext.Provider value={true}>
-      <RSCRouterGlobalErrorBoundary location={location}>
+      <RSCRouterGlobalErrorBoundary location={state.location}>
         <FrameworkContext.Provider value={frameworkContext}>
-          <RouterProvider router={router} flushSync={ReactDOM.flushSync} />
+          <RouterProvider
+            router={transitionEnabledRouter}
+            flushSync={ReactDOM.flushSync}
+            unstable_useTransitions
+          />
         </FrameworkContext.Provider>
       </RSCRouterGlobalErrorBoundary>
     </RSCRouterContext.Provider>
@@ -1022,11 +1048,13 @@ async function fetchAndApplyManifestPatches(
 
   // Without the `allowElementMutations` flag, this will no-op if the route
   // already exists so we can just call it for all returned patches
-  payload.patches.forEach((p) => {
-    (window as WindowWithRouterGlobals).__reactRouterDataRouter.patchRoutes(
-      p.parentId ?? null,
-      [createRouteFromServerManifest(p)],
-    );
+  React.startTransition(() => {
+    payload.patches.forEach((p) => {
+      (window as WindowWithRouterGlobals).__reactRouterDataRouter.patchRoutes(
+        p.parentId ?? null,
+        [createRouteFromServerManifest(p)],
+      );
+    });
   });
 }
 
@@ -1052,3 +1080,39 @@ function isExternalLocation(location: string) {
   const newLocation = new URL(location, window.location.href);
   return newLocation.origin !== window.location.origin;
 }
+
+function cloneRoutes(
+  routes: AgnosticDataRouteObject[] | undefined,
+): AgnosticDataRouteObject[] {
+  if (!routes) return undefined as any;
+  return routes.map((route) => ({
+    ...route,
+    children: cloneRoutes(route.children),
+  })) as any;
+}
+
+function diffRoutes(
+  a: AgnosticDataRouteObject[],
+  b: AgnosticDataRouteObject[],
+): boolean {
+  if (a.length !== b.length) return true;
+  return a.some((route, index) => {
+    if ((route as any).element !== (b[index] as any).element) return true;
+    if ((route as any).errorElement !== (b[index] as any).errorElement)
+      return true;
+    if (
+      (route as any).hydrateFallbackElement !==
+      (b[index] as any).hydrateFallbackElement
+    )
+      return true;
+    if ((route as any).hasErrorBoundary !== (b[index] as any).hasErrorBoundary)
+      return true;
+    if ((route as any).hasLoader !== (b[index] as any).hasLoader) return true;
+    if ((route as any).hasClientLoader !== (b[index] as any).hasClientLoader)
+      return true;
+    if ((route as any).hasAction !== (b[index] as any).hasAction) return true;
+    if ((route as any).hasClientAction !== (b[index] as any).hasClientAction)
+      return true;
+    return diffRoutes(route.children || [], b[index].children || []);
+  });
+}
diff --git a/playground/react-transitions/.gitignore b/playground/react-transitions/.gitignore
new file mode 100644
index 0000000000..8bafc41e1c
--- /dev/null
+++ b/playground/react-transitions/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/build
+.env
+
+.react-router/
\ No newline at end of file
diff --git a/playground/react-transitions/app/entry.client.tsx b/playground/react-transitions/app/entry.client.tsx
new file mode 100644
index 0000000000..8d68cb10cb
--- /dev/null
+++ b/playground/react-transitions/app/entry.client.tsx
@@ -0,0 +1,17 @@
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+let searchParams = new URLSearchParams(window.location.search);
+let transitions = searchParams.has("transitions")
+  ? searchParams.get("transitions") === "true"
+  : undefined;
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter unstable_useTransitions={transitions} />
+    </StrictMode>,
+  );
+});
diff --git a/playground/react-transitions/app/root.tsx b/playground/react-transitions/app/root.tsx
new file mode 100644
index 0000000000..b9f4bfe783
--- /dev/null
+++ b/playground/react-transitions/app/root.tsx
@@ -0,0 +1,31 @@
+import {
+  Link,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/playground/react-transitions/app/routes.ts b/playground/react-transitions/app/routes.ts
new file mode 100644
index 0000000000..4c05936cb6
--- /dev/null
+++ b/playground/react-transitions/app/routes.ts
@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;
diff --git a/playground/react-transitions/app/routes/_index.tsx b/playground/react-transitions/app/routes/_index.tsx
new file mode 100644
index 0000000000..4ab5a8a85a
--- /dev/null
+++ b/playground/react-transitions/app/routes/_index.tsx
@@ -0,0 +1,10 @@
+import { redirect } from "react-router";
+import type { Route } from "./+types/_index";
+
+export function loader({ request }: Route.LoaderArgs) {
+  return redirect("/transitions" + new URL(request.url).search);
+}
+
+export default function Index() {
+  return null;
+}
diff --git a/playground/react-transitions/app/routes/api.random.tsx b/playground/react-transitions/app/routes/api.random.tsx
new file mode 100644
index 0000000000..34857c0615
--- /dev/null
+++ b/playground/react-transitions/app/routes/api.random.tsx
@@ -0,0 +1,4 @@
+export async function loader() {
+  await new Promise((r) => setTimeout(r, 1000));
+  return { randomNumber: Math.round(Math.random() * 100) };
+}
diff --git a/playground/react-transitions/app/routes/transitions.parent.child.tsx b/playground/react-transitions/app/routes/transitions.parent.child.tsx
new file mode 100644
index 0000000000..982cdd7f44
--- /dev/null
+++ b/playground/react-transitions/app/routes/transitions.parent.child.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Await, Outlet } from "react-router";
+
+import type { Route } from "./+types/transitions.parent.child";
+
+export async function loader() {
+  await new Promise((r) => setTimeout(r, 1000));
+  let promise = new Promise((r) => setTimeout(() => r("CHILD DATA"), 2000));
+  return { promise };
+}
+
+export default function Transitions({ loaderData }: Route.ComponentProps) {
+  return (
+    <>
+      <h3>Child</h3>
+      <Await resolve={loaderData.promise}>
+        {(data) => <p>Data: {data}</p>}
+      </Await>
+    </>
+  );
+}
diff --git a/playground/react-transitions/app/routes/transitions.parent.tsx b/playground/react-transitions/app/routes/transitions.parent.tsx
new file mode 100644
index 0000000000..0e906c88b6
--- /dev/null
+++ b/playground/react-transitions/app/routes/transitions.parent.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Await, Outlet } from "react-router";
+
+import type { Route } from "./+types/transitions.parent";
+
+export async function loader() {
+  await new Promise((r) => setTimeout(r, 1000));
+  let promise = new Promise((r) => setTimeout(() => r("PARENT DATA"), 1000));
+  return { promise };
+}
+
+export default function Transitions({ loaderData }: Route.ComponentProps) {
+  return (
+    <>
+      <h2>Parent</h2>
+      <React.Suspense fallback={<p>Loading parent data...</p>}>
+        <Await resolve={loaderData.promise}>
+          {(data) => <p>Data: {data}</p>}
+        </Await>
+        <Outlet />
+      </React.Suspense>
+    </>
+  );
+}
diff --git a/playground/react-transitions/app/routes/transitions.slow.tsx b/playground/react-transitions/app/routes/transitions.slow.tsx
new file mode 100644
index 0000000000..f0e5cdbee0
--- /dev/null
+++ b/playground/react-transitions/app/routes/transitions.slow.tsx
@@ -0,0 +1,8 @@
+export async function clientLoader() {
+  await new Promise((r) => setTimeout(() => r("PARENT DATA"), 3000));
+  return null;
+}
+
+export default function Transitions() {
+  return <h2>Slow Page</h2>;
+}
diff --git a/playground/react-transitions/app/routes/transitions.tsx b/playground/react-transitions/app/routes/transitions.tsx
new file mode 100644
index 0000000000..31dc4a8a50
--- /dev/null
+++ b/playground/react-transitions/app/routes/transitions.tsx
@@ -0,0 +1,227 @@
+import * as React from "react";
+import {
+  Link,
+  Outlet,
+  useFetcher,
+  useNavigate,
+  useNavigation,
+} from "react-router";
+import type { loader as randomNumberLoader } from "./api.random";
+
+export default function Transitions() {
+  let navigate = useNavigate();
+  let fetcher = useFetcher<typeof randomNumberLoader>();
+  let navigation = useNavigation();
+  let [pending, startTransition] = React.useTransition();
+  let [count, setCount] = React.useState(0);
+  let [count2, setCount2] = React.useState(0);
+  let [random, setRandom] = React.useState(0);
+
+  React.useEffect(() => {
+    if (fetcher.data) {
+      let { randomNumber } = fetcher.data;
+      startTransition(() => setRandom(randomNumber));
+    }
+  }, [fetcher.data]);
+
+  return (
+    <>
+      <h1>Transitions</h1>
+      <nav>
+        Start Over:{" "}
+        <a href="/transitions">
+          <code>unstable_useTransitions=undefined</code>
+        </a>
+        {" | "}
+        <a href="/transitions?transitions=true">
+          <code>unstable_useTransitions=true</code>
+        </a>
+        {" | "}
+        <a href="/transitions?transitions=false">
+          <code>unstable_useTransitions=false</code>
+        </a>
+      </nav>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 0,
+          marginTop: "1rem",
+          border: "1px solid #ccc",
+        }}
+      >
+        <div style={{ padding: "1rem" }}>
+          <h2>Navigations</h2>
+
+          <div>
+            <p
+              style={{
+                color: pending ? "green" : "lightgrey",
+                fontWeight: pending ? "bold" : "normal",
+              }}
+            >
+              Local React Transition: {pending ? "Pending" : "Idle"}
+            </p>
+            <p
+              style={{
+                color: navigation.state !== "idle" ? "green" : "lightgrey",
+                fontWeight: navigation.state !== "idle" ? "bold" : "normal",
+              }}
+            >
+              React Router Navigation State: {navigation.state}
+            </p>
+          </div>
+
+          <ul style={{ maxWidth: "600px" }}>
+            <li>
+              <Link to="/transitions/slow">
+                &lt;Link to="/transitions/slow" /&gt;
+              </Link>
+              <ul>
+                <li>
+                  In the current state, <code>&lt;Link&gt;</code> navigations
+                  are not wrapped in <code>startTransition</code>, so they don't
+                  play nice with other transition-aware state updates
+                </li>
+                <li>
+                  Navigate and increment the transition-enabled counter during
+                  the navigation. We should not see the counter updates
+                  reflected until the navigation ends in a "suspense enabled"
+                  router
+                </li>
+                <li>
+                  With the new flag, they are wrapped in{" "}
+                  <code>startTransition</code> and the count syncs up properly
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <button onClick={() => navigate("/transitions/slow")}>
+                <code>navigate("/transitions/slow")</code>
+              </button>
+              <ul>
+                <li>
+                  <code>useNavigate</code> is is not wrapped in startTransitoion
+                  with or without the enw flag, so it should never sync with the
+                  transition-enabled counter
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <button
+                onClick={() =>
+                  // @ts-expect-error Needs React 19 types
+                  startTransition(() => navigate("/transitions/slow"))
+                }
+              >
+                <code>
+                  startTransition(() =&gt; navigate("/transitions/slow")
+                </code>
+              </button>
+              <ul>
+                <li>
+                  If you wrap <code>useNavigate</code> in{" "}
+                  <code>startTransition</code> manually, then it syncs with the
+                  counter.
+                </li>
+                <li>
+                  Without the flag, our router state updates don't surface
+                  during the navigation. Enabling the flag wraps out internal
+                  updates with <code>useOptimistic</code> to allow them to
+                  surface
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              Nested Parent/Child Await:
+              <ul>
+                <li>
+                  Should not re-fallback when going from parent -&gt; child
+                </li>
+                <li>
+                  <Link to="/transitions/parent">/transitions/parent</Link>
+                </li>
+                <li>
+                  <Link to="/transitions/parent/child">
+                    /transitions/parent/child
+                  </Link>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+
+        <div style={{ padding: "1rem" }}>
+          <div>
+            <h2>Fetchers</h2>
+            <button onClick={() => fetcher.load("/api/random")}>
+              fetcher.load("/api/random")
+            </button>
+            <br />
+            <br />
+            <button
+              // @ts-expect-error Needs React 19 types
+              onClick={() => startTransition(() => fetcher.load("/api/random"))}
+            >
+              startTransition(() =&gt; fetcher.load("/api/random"))
+            </button>
+            <p
+              style={{
+                color: fetcher.state !== "idle" ? "green" : "lightgrey",
+                fontWeight: fetcher.state !== "idle" ? "bold" : "normal",
+              }}
+            >
+              Fetcher State: <strong>{fetcher.state}</strong>
+            </p>
+            <p
+              style={{
+                color: fetcher.data != null ? "green" : "lightgrey",
+                fontWeight: fetcher.data != null ? "bold" : "normal",
+              }}
+            >
+              Fetcher Data:{" "}
+              {fetcher.data ? JSON.stringify(fetcher.data) : "null"}
+            </p>
+            <p
+              style={{
+                color: random !== 0 ? "green" : "lightgrey",
+                fontWeight: random !== 0 ? "bold" : "normal",
+              }}
+            >
+              Transition-aware fetcher data: {random}
+            </p>
+          </div>
+
+          <div>
+            <h2>Counters</h2>
+            <button onClick={() => setCount((c) => c + 1)}>
+              <code>setCount(c =&gt; c + 1)</code>
+            </button>{" "}
+            <span>Count = {count}</span>
+            <br />
+            <br />
+            <button
+              onClick={() =>
+                React.startTransition(() => setCount2((c) => c + 1))
+              }
+            >
+              <code>startTransition(() =&gt; setCount2(c =&gt; c + 1))</code>
+            </button>{" "}
+            <span>Count2 = {count2}</span>
+          </div>
+        </div>
+      </div>
+
+      <Outlet />
+      <p>
+        TODO: Is it possible to demonstrate the issue with{" "}
+        <code>React.useSyncExternalStore</code> where the global opt-out is
+        needed?
+      </p>
+    </>
+  );
+}
diff --git a/playground/react-transitions/package.json b/playground/react-transitions/package.json
new file mode 100644
index 0000000000..6b4b4b7bc8
--- /dev/null
+++ b/playground/react-transitions/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@playground/react-transitions",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "workspace:*",
+    "@react-router/serve": "workspace:*",
+    "isbot": "^5.1.11",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "workspace:*"
+  },
+  "devDependencies": {
+    "@react-router/dev": "workspace:*",
+    "@react-router/fs-routes": "^7.9.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^5.1.6",
+    "vite": "^6.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}
diff --git a/playground/react-transitions/public/favicon.ico b/playground/react-transitions/public/favicon.ico
new file mode 100644
index 0000000000..5dbdfcddcb
Binary files /dev/null and b/playground/react-transitions/public/favicon.ico differ
diff --git a/playground/react-transitions/react-router.config.ts b/playground/react-transitions/react-router.config.ts
new file mode 100644
index 0000000000..d0da26c798
--- /dev/null
+++ b/playground/react-transitions/react-router.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  future: {
+    unstable_subResourceIntegrity: true,
+  },
+} satisfies Config;
diff --git a/playground/react-transitions/tsconfig.json b/playground/react-transitions/tsconfig.json
new file mode 100644
index 0000000000..79cf7b5af6
--- /dev/null
+++ b/playground/react-transitions/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx",
+    "./.react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@react-router/node", "vite/client"],
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true,
+    "rootDirs": [".", "./.react-router/types"]
+  }
+}
diff --git a/playground/react-transitions/vite.config.ts b/playground/react-transitions/vite.config.ts
new file mode 100644
index 0000000000..f910ad4c18
--- /dev/null
+++ b/playground/react-transitions/vite.config.ts
@@ -0,0 +1,7 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [reactRouter(), tsconfigPaths()],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1092dd7c3..17c5a53a5f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,7 +113,7 @@ importers:
         version: 7.34.1(eslint@8.57.0)
       eslint-plugin-react-hooks:
         specifier: next
-        version: 7.0.0-canary-71b3a03c-20251021(eslint@8.57.0)
+        version: 7.1.0-canary-1ea46df8-20251111(eslint@8.57.0)
       fast-glob:
         specifier: 3.2.11
         version: 3.2.11
@@ -598,7 +598,7 @@ importers:
         version: 3.0.1(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1))
       vite-tsconfig-paths:
         specifier: ^4.2.1
-        version: 4.3.2(typescript@5.4.5)(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1)(terser@5.15.0))
+        version: 4.3.2(typescript@5.4.5)(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1))
 
   integration/helpers/vite-6-template:
     dependencies:
@@ -1576,7 +1576,7 @@ importers:
         version: 5.1.3(@types/node@22.14.0)(lightningcss@1.30.1)(terser@5.15.0)
       vite-tsconfig-paths:
         specifier: ^4.2.1
-        version: 4.3.2(typescript@5.4.5)(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1)(terser@5.15.0))
+        version: 4.3.2(typescript@5.4.5)(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1))
 
   playground/framework-vite-7-beta:
     dependencies:
@@ -1691,6 +1691,49 @@ importers:
         specifier: ^4.2.1
         version: 4.3.2(typescript@5.4.5)(vite@6.2.5(@types/node@20.11.30)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.19.3)(yaml@2.8.0))
 
+  playground/react-transitions:
+    dependencies:
+      '@react-router/node':
+        specifier: workspace:*
+        version: link:../../packages/react-router-node
+      '@react-router/serve':
+        specifier: workspace:*
+        version: link:../../packages/react-router-serve
+      isbot:
+        specifier: ^5.1.11
+        version: 5.1.11
+      react:
+        specifier: ^19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.1.0(react@19.1.0)
+      react-router:
+        specifier: workspace:*
+        version: link:../../packages/react-router
+    devDependencies:
+      '@react-router/dev':
+        specifier: workspace:*
+        version: link:../../packages/react-router-dev
+      '@react-router/fs-routes':
+        specifier: ^7.9.5
+        version: 7.9.5(@react-router/dev@packages+react-router-dev)(typescript@5.4.5)
+      '@types/react':
+        specifier: ^18.2.18
+        version: 18.2.18
+      '@types/react-dom':
+        specifier: ^18.2.7
+        version: 18.2.7
+      typescript:
+        specifier: ^5.1.6
+        version: 5.4.5
+      vite:
+        specifier: ^6.1.0
+        version: 6.2.5(@types/node@22.14.0)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.19.3)(yaml@2.8.0)
+      vite-tsconfig-paths:
+        specifier: ^4.2.1
+        version: 4.3.2(typescript@5.4.5)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.19.3)(yaml@2.8.0))
+
   playground/rsc-parcel:
     dependencies:
       '@mjackson/node-fetch-server':
@@ -4295,6 +4338,16 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@react-router/fs-routes@7.9.5':
+    resolution: {integrity: sha512-LE6WXgNC53YJ40QF2m8QV5iJYX1O+hF6H/Oz5sodgnFaal6sfMZAMp+lPb1Hm8pYDpwz6zXpUsKa+Btl9/r/Qg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@react-router/dev': ^7.9.5
+      typescript: ^5.1.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@remix-run/changelog-github@0.0.5':
     resolution: {integrity: sha512-43tqwUqWqirbv6D9uzo55ASPsCJ61Ein1k/M8qn+Qpros0MmbmuzjLVPmtaxfxfe2ANX0LefLvCD0pAgr1tp4g==}
 
@@ -6262,8 +6315,8 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
 
-  eslint-plugin-react-hooks@7.0.0-canary-71b3a03c-20251021:
-    resolution: {integrity: sha512-7EwZO7Drxeeq1g1ZNcIu93EEm0BvfBXZmUE+psxQCvpyyVfs7096NVcTuiuxY5aQwCGFdrVrSsgrSMHAFA6TUA==}
+  eslint-plugin-react-hooks@7.1.0-canary-1ea46df8-20251111:
+    resolution: {integrity: sha512-RnecPzYgLM3BkK2vDf6/wndk58aoB9XeP1UH1WChipUEMkhExJjV6H83u+hzMiS3CyNwl93Fa2b1CIj40+PGjQ==}
     engines: {node: '>=18'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
@@ -12751,6 +12804,13 @@ snapshots:
     dependencies:
       playwright: 1.49.1
 
+  '@react-router/fs-routes@7.9.5(@react-router/dev@packages+react-router-dev)(typescript@5.4.5)':
+    dependencies:
+      '@react-router/dev': link:packages/react-router-dev
+      minimatch: 9.0.5
+    optionalDependencies:
+      typescript: 5.4.5
+
   '@remix-run/changelog-github@0.0.5':
     dependencies:
       '@changesets/errors': 0.1.4
@@ -15145,7 +15205,7 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-plugin-react-hooks@7.0.0-canary-71b3a03c-20251021(eslint@8.57.0):
+  eslint-plugin-react-hooks@7.1.0-canary-1ea46df8-20251111(eslint@8.57.0):
     dependencies:
       '@babel/core': 7.27.7
       '@babel/parser': 7.27.7
@@ -19490,7 +19550,7 @@ snapshots:
       - supports-color
       - typescript
 
-  vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1)(terser@5.15.0)):
+  vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.1.3(@types/node@22.14.0)(lightningcss@1.30.1)):
     dependencies:
       debug: 4.4.1
       globrex: 0.1.2