diff --git a/.changeset/olive-planets-think.md b/.changeset/olive-planets-think.md
new file mode 100644
index 0000000000..f29fc4ef65
--- /dev/null
+++ b/.changeset/olive-planets-think.md
@@ -0,0 +1,28 @@
+---
+"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)
+    - Router 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 to get the enhanced `useOptimistic` behavior (requires React 19)
+  - When set to `true`
+    - Router state updates remain wrapped in `React.startTransition` (as they are without the flag)
+    - `Link`/`Form` navigations will be wrapped in `React.startTransition`
+    - A subset of router state info will be surfaced to the UI _during_ navigations via `React.useOptimistic` (i.e., `useNavigation()`, `useFetchers()`, etc.)
+      - ⚠️ This is a React 19 API so you must also be React 19 to opt into this flag for Framework/Data Mode
+  - 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
+    - Router state updates are wrapped in `React.startTransition`
+  - When set to `true`
+    - Router state updates remain wrapped in `React.startTransition` (as they are without the flag)
+    - `Link`/`Form` navigations 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/.changeset/real-chairs-exercise.md b/.changeset/real-chairs-exercise.md
new file mode 100644
index 0000000000..63f2c55006
--- /dev/null
+++ b/.changeset/real-chairs-exercise.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix the promise returned from `useNavigate` in Framework/Data Mode so that it properly tracks the duration of `popstate` navigations (i.e., `navigate(-1)`)
diff --git a/docs/explanation/react-transitions.md b/docs/explanation/react-transitions.md
new file mode 100644
index 0000000000..46d1a0624f
--- /dev/null
+++ b/docs/explanation/react-transitions.md
@@ -0,0 +1,197 @@
+---
+title: React Transitions
+unstable: true
+---
+
+# React Transitions
+
+[MODES: framework, data, declarative]
+
+<br/>
+<br/>
+
+[React 18][react-18] Introduced the concept of "transitions" which allow you differentiate urgent from non-urgent UI updates. We won't try to explain transitions or the underlying "concurrent rendering" concept in this doc, but you can read up on those concepts here:
+
+- [What is Concurrent React][concurrent]
+- [Transitions][transitions]
+- [`React.useTransition`][use-transition]
+- [`React.startTransition`][start-transition]
+
+[React 19][react-19] continued enhancing the async/concurrent landscape and introduces [actions][actions] and support for using async functions in transitions. With the support for async transitions, a new [`React.useOptimistic][use-optimistic-blog] [hook][use-optimistic] was introduced that allows you to surface state updates during a transition to show users instant feedback.
+
+## Transitions in React Router
+
+The introduction of transitions in React makes the story of how React Router manages your navigations and router state a bit more complicated. These are powerful APIs but they don't come without some nuance and added complexity. We aim to make React Router work seamlessly with the new React features, but in some cases there may exist some tension between the new React ways to do things and some patterns you are already using in your React Router apps (i.e., pending states, optimistic UI).
+
+To ensure a smooth adoption story, we've introduced changes related to transitions behind an opt-in `unstable_useTransitions` flag so that you can upgrade in a non-breaking fashion.
+
+### Current Behavior
+
+Back in early 2023, Dan Abramov filed an [issue][dan-issue] for Remix v1 to use `React.startTransition` to "Remix router would be more Suspense-y". After a bit of clarification we [implemented][startTransition-pr] and shipped that in React Router [6.13.0][rr-6-13-0] via behind a `future.v7_startTransition` flag. In v7, that became the default behavior and all router state updates are currently wrapped in `React.startTransition`.
+
+This turns out to be potentially problematic behavior today for 2 reasons:
+
+- There are some valid use cases where you _don't_ want your updates wrapped in `startTransition`
+  - One specific issue is that `React.useSyncExternalStore` is incompatible with transitions ([^1][uses-transition-issue], [^2][uses-transition-tweet]) so if you are using that in your application, you can run into tearing issues when combined with `React.startTransition`
+  - React Router has a `flushSync` option on navigations to use [`React.flushSync`][flush-sync] for the state updates instead, but that's not always the proper solution
+- React 19 has added a new `startTransition(() => Promise))` API as well as a new `useOptimistic` hook to surface updates during transitions
+  - Without some updates to React Router, `startTransition(() => navigate(path))` doesn't work as you might expect, because we are not using `useOptimistic` internally so router state updates don't surface during the navigation, which breaks hooks like `useNavigation`
+
+To provide a solution to both of the above issues, we're introducing a new `unstable_useTransitions` prop for the router components that will let you opt-out of using `startTransition` for router state upodates (solving the first issue), or opt-into a more enhanced usage of `startTransition` + `useOptimistic` (solving the second issue). Because the current behavior is a bit incomplete with the new React 19 APIs, we plan to make the opt-in behavior the default in React Router v8, but we will likely retain the opt-out flag for use cases such as `useSyncExternalStore`.
+
+### Opt-out via `unstable_useTransitions=false`
+
+If your application is not "transition-friendly" due to the usage of `useSyncExternalStore` (or other reasons), then you can opt-out via the prop:
+
+```tsx
+// Framework Mode (entry.client.tsx)
+<HydratedRouter unstable_useTransitions={false} />
+
+// Data Mode
+<RouterProvider unstable_useTransitions={false} />
+
+// Declarative Mode
+<BrowserRouter unstable_useTransitions={false} />
+```
+
+This will stop the router from wrapping internal state updates in `startTransition`.
+
+<docs-warning>We do not recommend this as a long-term solution because opting out of transitions means that your application will not be fully compatible with the modern features of React, including `Suspense`, `use`, `startTransition`, `useOptimistic`, `<ViewTransition>`, etc.</docs-warning>
+
+### Opt-in via `unstable_useTransitions=true`
+
+<docs-info>Opting into this feature in Framework or Data Mode requires that you are using React 19 because it needs access to [`React.useOptimistic`][use-optimistic]</docs-info>
+
+If you want to make your application play nicely with all of the new React 19 features that rely on concurrent mode and transitions, then you can opt-in via the new prop:
+
+```tsx
+// Framework Mode (entry.client.tsx)
+<HydratedRouter unstable_useTransitions />
+
+// Data Mode
+<RouterProvider unstable_useTransitions />
+
+// Declarative Mode
+<BrowserRouter unstable_useTransitions />
+```
+
+With this flag enabled:
+
+- All internal state updates are wrapped in `React.startTransition` (current behavior without the flag)
+- All `<Link>`/`<Form>` navigations will be wrapped in `React.startTransition`, using the promise returned by `useNavigate`/`useSubmit` so that the transition lasts for the duration of the navigation
+  - `useNavigate`/`useSubmit` do not automatically wrap in `React.startTransition`, so you can opt-out of a transition-enabled navigation by using those directly
+- In Framework/Data modes, a subset of the router state updates during a navigation will be surfaced to the UI via `useOptimistic`
+  - State related to the _ongoing_ navigation and all fetcher information will be surfaced:
+    - `state.navigation` for `useNavigation()`
+    - `state.revalidation` for `useRevalidator()`
+    - `state.actionData` for `useActionData()`
+    - `state.fetchers` for `useFetcher()` and `useFetchers()`
+  - State related to the _current_ location will not be surfaced:
+    - `state.location` for `useLocation`
+    - `state.matches` for `useMatches()`,
+    - `state.loaderData` for `useLoaderData()`
+    - `state.errors` for `useRouteError()`
+    - etc.
+
+Enabling this flag means that you can now have fully-transition-enabled navigations that play nicely with any other ongoing transition-enabled aspects of your application.
+
+The only APIs that are automatically wrapped in an async transition are `<Link>` and `<Form>`. For everything else, you need to wrap the operation in `startTransition` yourself.
+
+```tsx
+// Automatically transition-enabled
+<Link to="/path" />
+<Form method="post" action="/path" />
+
+// Manually transition-enabled
+startTransition(() => navigate("/path"));
+startTransition(() => submit(data, { method: 'post', action: "/path" }));
+startTransition(() => fetcher.load("/path"));
+startTransition(() => fetcher.submit(data, { method: "post", action: "/path" }));
+
+// Not transition-enabled
+navigate("/path");
+submit(data, { method: 'post', action: "/path" });
+fetcher.load("/path");
+fetcher.submit(data, { method: "post", action: "/path" });
+```
+
+**Important:** You must always `return` or `await` the `navigate` promise inside `startTransition` so that the transition encompasses the full duration of the navigation. If you forget to `return` or `await` the promise, the transition will end prematurely and things won't work as expected.
+
+```tsx
+// ✅ Returned promise
+startTransition(() => navigate("/path"));
+startTransition(() => {
+  setOptimistic(something);
+  return navigate("/path"));
+});
+
+// ✅ Awaited promise
+startTransition(async () => {
+  setOptimistic(something);
+  await navigate("/path"));
+});
+
+// ❌ Non-returned promise
+startTransition(() => {
+  setOptimistic(something);
+  navigate("/path"));
+});
+
+// ❌ Non-Awaited promise
+startTransition(async () => {
+  setOptimistic(something);
+  navigate("/path"));
+});
+```
+
+#### `popstate` navigations
+
+Due to limitations in React itself, [`popstate`][popstate] navigations cannot be transition-enabled. Any state updates during a `popstate` event are [automatically][popstate-sync-pr] [flushed][bsky-ricky-popstate] synchronously so that the browser can properly restore scroll position and form data.
+
+However, the browser can only do this if the navigation is instant. If React Router needs to run loaders on a back navigation, the browser will not be able to restore scroll position or form data ([`<ScrollRestoration>`][scroll-restoration] can handle scroll position for you).
+
+It is therefore not recommended to wrap `navigate(n)` navigations in `React.startTransition`
+unless you can manage your pending UI with local transition state (`React.useTransition`).
+
+```tsx
+// ❌ This won't work correctly
+startTransition(() => navigate(-1));
+```
+
+If you _need_ programmatic back-navigations to be transition-friendly in your app, you can introduce a small hack to prevent React from detecting the event and letting the transition work as expected. React checks `window.event` to determine if the state updates are part of a `popstate` event, so if you clear that out in your own listener you can trick React into treating it like any other state update:
+
+```tsx
+// Add this to the top of your browser entry file
+window.addEventListener(
+  "popstate",
+  () => {
+    window.event = null;
+  },
+  {
+    capture: true,
+  },
+);
+```
+
+<docs-warning>Please be aware this is a hack, has not been thoroughly tested, and may not continue to work if React changes their underlying implementation. We did get their [permission][ricky-bsky-event-hack] to mention it though 😉</docs-warning>
+
+[react-18]: https://react.dev/blog/2022/03/29/react-v18
+[concurrent]: https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react
+[transitions]: https://react.dev/blog/2022/03/29/react-v18#new-feature-transitions
+[use-transition]: https://react.dev/reference/react/useTransition#reference
+[start-transition]: https://react.dev/reference/react/startTransition
+[react-19]: https://react.dev/blog/2024/12/05/react-19
+[actions]: https://react.dev/blog/2024/12/05/react-19#actions
+[use-optimistic-blog]: https://react.dev/blog/2024/12/05/react-19#new-hook-optimistic-updates
+[use-optimistic]: https://react.dev/reference/react/useOptimistic
+[flush-sync]: https://react.dev/reference/react-dom/flushSync
+[dan-issue]: https://github.com/remix-run/remix/issues/5763
+[startTransition-pr]: https://github.com/remix-run/react-router/pull/10438
+[rr-6-13-0]: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6130
+[uses-transition-issue]: https://github.com/facebook/react/issues/26382
+[uses-transition-tweet]: https://x.com/rickhanlonii/status/1683636856808775682
+[bsky-ricky-popstate]: https://bsky.app/profile/ricky.fm/post/3m5ujj6tuks2e
+[popstate-sync-pr]: https://github.com/facebook/react/pull/26025
+[scroll-restoration]: ../api/components/ScrollRestoration
+[ricky-bsky-event-hack]: https://bsky.app/profile/ricky.fm/post/3m5wgqw3swc26
+[popstate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event
diff --git a/packages/react-router/__tests__/data-memory-router-test.tsx b/packages/react-router/__tests__/data-memory-router-test.tsx
index 248536eee1..b46e5d6576 100644
--- a/packages/react-router/__tests__/data-memory-router-test.tsx
+++ b/packages/react-router/__tests__/data-memory-router-test.tsx
@@ -1067,6 +1067,62 @@ describe("createMemoryRouter", () => {
     ]);
   });
 
+  it("exposes promise from useNavigate (popstate)", async () => {
+    let sequence: string[] = [];
+    let router = createMemoryRouter(
+      [
+        {
+          path: "/",
+          async loader() {
+            sequence.push("loader start");
+            await new Promise((r) => setTimeout(r, 100));
+            sequence.push("loader end");
+            return null;
+          },
+          Component() {
+            sequence.push("render");
+            return <h1>Home</h1>;
+          },
+        },
+        {
+          path: "/page",
+          Component: () => {
+            let navigate = useNavigate();
+            return (
+              <>
+                <h1>Page</h1>
+                <button
+                  onClick={async () => {
+                    sequence.push("call navigate");
+                    await navigate(-1);
+                    sequence.push("navigate resolved");
+                  }}
+                >
+                  Back
+                </button>
+              </>
+            );
+          },
+        },
+      ],
+      { initialEntries: ["/", "/page"] },
+    );
+
+    let { container } = render(<RouterProvider router={router} />);
+
+    expect(getHtml(container)).toContain("Page");
+    fireEvent.click(screen.getByText("Back"));
+    await waitFor(() => screen.getByText("Home"));
+
+    expect(sequence).toEqual([
+      "call navigate",
+      "loader start",
+      "loader end",
+      "navigate resolved",
+      "render",
+    ]);
+  });
+
   it("exposes promise from useSubmit", async () => {
     let sequence: string[] = [];
     let router = createMemoryRouter([
diff --git a/packages/react-router/__tests__/dom/data-browser-router-test.tsx b/packages/react-router/__tests__/dom/data-browser-router-test.tsx
index 6d05d6e883..9648e1f2aa 100644
--- a/packages/react-router/__tests__/dom/data-browser-router-test.tsx
+++ b/packages/react-router/__tests__/dom/data-browser-router-test.tsx
@@ -2527,6 +2527,75 @@ function testDomRouter(
       `);
     });
 
+    it("exposes promise from useNavigate (popstate)", async () => {
+      let sequence: string[] = [];
+      let router = createTestRouter(
+        [
+          {
+            id: "home",
+            path: "/",
+            async loader() {
+              sequence.push("loader start");
+              await new Promise((r) => setTimeout(r, 100));
+              sequence.push("loader end");
+              return null;
+            },
+            Component() {
+              sequence.push("render");
+              return (
+                <>
+                  <h1>Home</h1>
+                  <Link to="/page">Go to page</Link>
+                </>
+              );
+            },
+          },
+          {
+            path: "/page",
+            Component: () => {
+              let navigate = useNavigate();
+              return (
+                <>
+                  <h1>Page</h1>
+                  <button
+                    onClick={async () => {
+                      sequence.push("call navigate");
+                      await navigate(-1);
+                      sequence.push("navigate resolved");
+                    }}
+                  >
+                    Back
+                  </button>
+                </>
+              );
+            },
+          },
+        ],
+        {
+          hydrationData: { loaderData: { home: null } },
+          window: getWindow("/"),
+        },
+      );
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      expect(getHtml(container)).toContain("Home");
+      fireEvent.click(screen.getByText("Go to page"));
+      await waitFor(() => screen.getByText("Page"));
+      sequence.splice(0); // clear sequence
+
+      fireEvent.click(screen.getByText("Back"));
+      await waitFor(() => screen.getByText("Home"));
+
+      expect(sequence).toEqual([
+        "call navigate",
+        "loader start",
+        "loader end",
+        "navigate resolved",
+        "render",
+      ]);
+    });
+
     describe("<Form action>", () => {
       function NoActionComponent() {
         return (
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..e3d6a5e4b4
--- /dev/null
+++ b/packages/react-router/__tests__/react-transitions-test.tsx
@@ -0,0 +1,1368 @@
+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,
+  useRevalidator,
+} from "react-router";
+
+import {
+  Form,
+  Link,
+  createBrowserRouter,
+  useActionData,
+  useFetcher,
+  useNavigate,
+  useSubmit,
+} from "../index";
+import { createDeferred, tick } from "./router/utils/utils";
+import getWindow from "./utils/getWindow";
+
+describe("react transitions", () => {
+  describe("<RouterProvider unstable_useTransitions={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" })
+                    }
+                  >
+                    Submit
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Submit"));
+      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" }),
+                      );
+                    }}
+                  >
+                    Submit
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Submit"));
+      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 unstable_useTransitions={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" })
+                    }
+                  >
+                    Submit
+                  </button>
+                );
+              },
+            },
+            {
+              path: "page",
+              action: () => actionDfd.promise,
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+          ],
+        },
+      ]);
+
+      let { container } = render(<RouterProvider router={router} />);
+
+      await waitFor(() => screen.getByText("Submit"));
+      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 unstable_useTransitions={true} />", () => {
+    it("Link 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 (
+                  <Link id="link" to="/page">
+                    Go to page
+                  </Link>
+                );
+              },
+            },
+            {
+              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("useNavigate 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={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: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("useNavigate navigations can be 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();
+                let [pending, startTransition] = React.useTransition();
+                return (
+                  <button
+                    id="link"
+                    // @ts-expect-error Needs react 19 types
+                    onClick={() => startTransition(() => navigate("/page"))}
+                  >
+                    Go to page{pending ? " (pending)" : null}
+                  </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();
+      expect(screen.getByText("Go to page (pending)")).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("Form submissions are transition-enabled", async () => {
+      let actionDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createBrowserRouter([
+        {
+          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() {
+                return (
+                  <Form method="post" action="/page">
+                    <button id="submit" type="submit" name="name" value="value">
+                      Submit
+                    </button>
+                  </Form>
+                );
+              },
+            },
+            {
+              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("Submit"));
+      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();
+    });
+
+    it("useSubmit 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" })
+                    }
+                  >
+                    Submit
+                  </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("Submit"));
+      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();
+    });
+
+    it("useSubmit submissions can be 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();
+                let [pending, startTransition] = React.useTransition();
+                return (
+                  <button
+                    id="submit"
+                    onClick={() =>
+                      startTransition(() =>
+                        // @ts-expect-error Needs react 19 types
+                        submit({}, { method: "post", action: "/page" }),
+                      )
+                    }
+                  >
+                    Submit{pending ? " (pending)" : null}
+                  </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("Submit"));
+      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();
+      expect(screen.getByText("Submit (pending)")).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();
+    });
+
+    it("actionData surfaces during the transition", async () => {
+      let actionDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createBrowserRouter(
+        [
+          {
+            id: "index",
+            path: "/",
+            action: () => actionDfd.promise,
+            loader: () => loaderDfd.promise,
+            Component() {
+              let loaderData = useLoaderData();
+              let actionData = useActionData();
+              let navigation = useNavigation();
+              return (
+                <>
+                  <p>{`Loader:${loaderData}`}</p>
+                  <p>{`Action:${actionData}`}</p>
+                  <p>{`Navigation:${navigation.state}`}</p>
+                  <Form method="post">
+                    <button id="submit" type="submit" name="name" value="value">
+                      Submit
+                    </button>
+                  </Form>
+                </>
+              );
+            },
+          },
+        ],
+        {
+          hydrationData: {
+            loaderData: {
+              index: "initial",
+            },
+          },
+          window: getWindow("/"),
+        },
+      );
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Submit"));
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+      expect(screen.getByText("Loader:initial")).toBeDefined();
+      expect(screen.getByText("Action:undefined")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#submit")!);
+      await waitFor(() => screen.getByText("Navigation:submitting"));
+
+      actionDfd.resolve("action-data");
+      await waitFor(() => screen.getByText("Navigation:loading"));
+      expect(screen.getByText("Loader:initial")).toBeDefined();
+      expect(screen.getByText("Action:action-data")).toBeDefined();
+
+      loaderDfd.resolve("revalidated");
+      await waitFor(() => screen.getByText("Navigation:idle"));
+      expect(screen.getByText("Loader:revalidated")).toBeDefined();
+      expect(screen.getByText("Action:action-data")).toBeDefined();
+    });
+
+    it("useFetcher is not transition-enabled", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let fetcher = useFetcher();
+            let [count, setCount] = React.useState(0);
+            return (
+              <>
+                <p>{`Fetcher:${fetcher.state}:${fetcher.data}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <button id="fetch" onClick={() => fetcher.load("/fetch")}>
+                  Fetch
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+        },
+        {
+          path: "fetch",
+          loader: () => loaderDfd.promise,
+        },
+      ]);
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Fetch"));
+      expect(screen.getByText("Fetcher:idle:undefined")).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("#fetch")!);
+      await waitFor(() => screen.getByText("Fetcher:loading:undefined"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+      expect(screen.getByText("Fetch")).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("Fetcher:loading:undefined")).toBeDefined();
+
+      loaderDfd.resolve("data");
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Fetcher:idle:data")).toBeDefined();
+    });
+
+    it("useFetcher can be transition-enabled", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let fetcher = useFetcher();
+            let [count, setCount] = React.useState(0);
+            let [pending, startTransition] = React.useTransition();
+            return (
+              <>
+                <p>{`Fetcher:${fetcher.state}:${fetcher.data}`}</p>
+                <button
+                  id="increment"
+                  onClick={() =>
+                    React.startTransition(() => setCount((c) => c + 1))
+                  }
+                >
+                  {`Increment:${count}`}
+                </button>
+                <button
+                  id="fetch"
+                  // @ts-expect-error Needs react 19 types
+                  onClick={() => startTransition(() => fetcher.load("/fetch"))}
+                >
+                  Fetch{pending ? " (pending)" : null}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+        },
+        {
+          path: "fetch",
+          loader: () => loaderDfd.promise,
+        },
+      ]);
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Fetch"));
+      expect(screen.getByText("Fetcher:idle:undefined")).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("#fetch")!);
+      await waitFor(() => screen.getByText("Fetcher:loading:undefined"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+      expect(screen.getByText("Fetch (pending)")).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("Fetcher:loading:undefined")).toBeDefined();
+
+      loaderDfd.resolve("data");
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Fetcher:idle:data")).toBeDefined();
+    });
+
+    it("fetcher updates surface mid-navigation", async () => {
+      let loaderDfd = createDeferred();
+      let fetcherDfd = createDeferred();
+      let router = createMemoryRouter([
+        {
+          path: "/",
+          Component() {
+            let navigation = useNavigation();
+            let fetcher = useFetcher();
+            return (
+              <>
+                <p>{`Navigation:${navigation.state}`}</p>
+                <button id="fetch" onClick={() => fetcher.load("/fetch")}>
+                  {`Fetcher ${fetcher.state}:${fetcher.data}`}
+                </button>
+                <Outlet />
+              </>
+            );
+          },
+          children: [
+            {
+              index: true,
+              Component() {
+                return (
+                  <Link id="link" to="/page">
+                    Go to page
+                  </Link>
+                );
+              },
+            },
+            {
+              path: "page",
+              loader: () => loaderDfd.promise,
+              Component() {
+                return <h1>{useLoaderData()}</h1>;
+              },
+            },
+            {
+              path: "fetch",
+              loader: () => fetcherDfd.promise,
+            },
+          ],
+        },
+      ]);
+
+      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("Fetcher idle:undefined")).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("Fetcher idle:undefined")).toBeDefined();
+
+      await fireEvent.click(container.querySelector("#fetch")!);
+      await waitFor(() => screen.getByText("Fetcher loading:undefined"));
+      expect(screen.getByText("Navigation:loading")).toBeDefined();
+
+      fetcherDfd.resolve("data");
+      await waitFor(() => screen.getByText("Fetcher idle:data"));
+      expect(screen.getByText("Navigation:loading")).toBeDefined();
+
+      loaderDfd.resolve("Page");
+      await waitFor(() => screen.getByText("Page"));
+      expect(screen.getByText("Fetcher idle:data")).toBeDefined();
+      expect(screen.getByText("Navigation:idle")).toBeDefined();
+    });
+
+    it("useRevalidator is not transition-enabled", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter(
+        [
+          {
+            id: "index",
+            path: "/",
+            loader: () => loaderDfd.promise,
+            Component() {
+              let data = useLoaderData();
+              let revalidator = useRevalidator();
+              let [count, setCount] = React.useState(0);
+              return (
+                <>
+                  <p>{`Loader:${data}`}</p>
+                  <p>{`Revalidator:${revalidator.state}`}</p>
+                  <button
+                    id="increment"
+                    onClick={() =>
+                      React.startTransition(() => setCount((c) => c + 1))
+                    }
+                  >
+                    {`Increment:${count}`}
+                  </button>
+                  <button
+                    id="revalidate"
+                    onClick={() => revalidator.revalidate()}
+                  >
+                    Revalidate
+                  </button>
+                </>
+              );
+            },
+          },
+        ],
+        {
+          hydrationData: {
+            loaderData: {
+              index: "initial",
+            },
+          },
+        },
+      );
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Revalidate"));
+      expect(screen.getByText("Revalidator:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+      expect(screen.getByText("Loader:initial")).toBeDefined();
+
+      // With transitions enabled, our updates surface via useOptimistic, but
+      // other transition-enabled updates do not
+      await fireEvent.click(container.querySelector("#revalidate")!);
+      await waitFor(() => screen.getByText("Revalidator: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("Revalidator:loading")).toBeDefined();
+
+      loaderDfd.resolve("revalidated");
+      await waitFor(() => screen.getByText("Revalidator:idle"));
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Loader:revalidated")).toBeDefined();
+    });
+
+    it("useRevalidator can be transition-enabled", async () => {
+      let loaderDfd = createDeferred();
+      let router = createMemoryRouter(
+        [
+          {
+            id: "index",
+            path: "/",
+            loader: () => loaderDfd.promise,
+            Component() {
+              let data = useLoaderData();
+              let revalidator = useRevalidator();
+              let [count, setCount] = React.useState(0);
+              let [pending, startTransition] = React.useTransition();
+              return (
+                <>
+                  <p>{`Loader:${data}`}</p>
+                  <p>{`Revalidator:${revalidator.state}`}</p>
+                  <button
+                    id="increment"
+                    onClick={() =>
+                      React.startTransition(() => setCount((c) => c + 1))
+                    }
+                  >
+                    {`Increment:${count}`}
+                  </button>
+                  <button
+                    id="revalidate"
+                    onClick={() =>
+                      // @ts-expect-error Needs react 19 types
+                      startTransition(() => revalidator.revalidate())
+                    }
+                  >
+                    {`Revalidate${pending ? " (pending)" : ""}`}
+                  </button>
+                </>
+              );
+            },
+          },
+        ],
+        {
+          hydrationData: {
+            loaderData: {
+              index: "initial",
+            },
+          },
+        },
+      );
+
+      let { container } = render(
+        <RouterProvider router={router} unstable_useTransitions={true} />,
+      );
+
+      await waitFor(() => screen.getByText("Revalidate"));
+      expect(screen.getByText("Revalidator:idle")).toBeDefined();
+      expect(screen.getByText("Increment:0")).toBeDefined();
+      expect(screen.getByText("Loader:initial")).toBeDefined();
+
+      // With transitions enabled, our updates surface via useOptimistic, but
+      // other transition-enabled updates do not
+      await fireEvent.click(container.querySelector("#revalidate")!);
+      await waitFor(() => screen.getByText("Revalidator:loading"));
+      expect(screen.getByText("Increment:0")).toBeDefined();
+      expect(screen.getByText("Revalidate (pending)")).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("Revalidator:loading")).toBeDefined();
+
+      loaderDfd.resolve("revalidated");
+      await waitFor(() => screen.getByText("Revalidator:idle"));
+      await waitFor(() => screen.getByText("Increment:2"));
+      expect(screen.getByText("Loader:revalidated")).toBeDefined();
+    });
+  });
+});
diff --git a/packages/react-router/__tests__/router/router-test.ts b/packages/react-router/__tests__/router/router-test.ts
index b598f7cadd..c5f9bbee35 100644
--- a/packages/react-router/__tests__/router/router-test.ts
+++ b/packages/react-router/__tests__/router/router-test.ts
@@ -5,7 +5,7 @@ import type {
   AgnosticDataRouteObject,
   AgnosticRouteObject,
 } from "../../lib/router/utils";
-import { data, ErrorResponseImpl } from "../../lib/router/utils";
+import { data, ErrorResponseImpl, redirect } from "../../lib/router/utils";
 
 import { urlMatch } from "./utils/custom-matchers";
 import {
@@ -883,6 +883,254 @@ describe("a router", () => {
         ),
       });
     });
+
+    it("handles promises for navigations", async () => {
+      let aDfd = createDeferred();
+
+      let router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          {
+            id: "index",
+            path: "/",
+          },
+          {
+            id: "a",
+            path: "/a",
+            loader: () => aDfd.promise,
+          },
+        ],
+      });
+
+      let sequence: string[] = [];
+      router.navigate("/a").then(() => sequence.push("/a complete"));
+      await tick();
+      expect(sequence).toEqual([]);
+      aDfd.resolve("A DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+      expect(sequence).toEqual(["/a complete"]);
+    });
+
+    it("handles promises for popstate navigations", async () => {
+      let indexDfd = createDeferred();
+
+      let router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          {
+            id: "index",
+            path: "/",
+            loader: () => indexDfd.promise,
+          },
+          {
+            id: "a",
+            path: "/a",
+          },
+        ],
+        hydrationData: {
+          loaderData: {
+            index: "INDEX DATA",
+          },
+        },
+      }).initialize();
+
+      let sequence: string[] = [];
+      await router.navigate("/a");
+      expect(router.state.location.pathname).toBe("/a");
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+
+      router.navigate(-1).then(() => sequence.push("back complete"));
+      await tick();
+      expect(sequence).toEqual([]);
+
+      indexDfd.resolve("INDEX DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+      expect(sequence).toEqual(["back complete"]);
+    });
+
+    it("handles promises for interrupted navigations", async () => {
+      let indexDfd = createDeferred();
+      let aDfd = createDeferred();
+      let bDfd = createDeferred();
+      let cDfd = createDeferred();
+
+      let router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          {
+            id: "index",
+            path: "/",
+            loader: () => indexDfd.promise,
+          },
+          {
+            id: "a",
+            path: "/a",
+            loader: () => aDfd.promise,
+          },
+          {
+            id: "b",
+            path: "/b",
+            loader: () => bDfd.promise,
+          },
+          {
+            id: "c",
+            path: "/c",
+            loader: () => cDfd.promise,
+          },
+        ],
+        hydrationData: {
+          loaderData: {
+            index: "INDEX DATA",
+          },
+        },
+      });
+
+      let sequence: string[] = [];
+      router.navigate("/a").then(() => sequence.push("/a complete"));
+      aDfd.resolve("A DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+
+      router.navigate("/b").then(() => sequence.push("/b complete"));
+      await tick();
+      expect(sequence).toEqual(["/a complete"]);
+
+      router.navigate("/c").then(() => sequence.push("/c complete"));
+      await tick();
+      expect(sequence).toEqual(["/a complete", "/b complete"]);
+
+      bDfd.resolve("B DATA"); // no-op
+      await tick();
+      expect(router.state.navigation.state).toBe("loading");
+      expect(sequence).toEqual(["/a complete", "/b complete"]);
+
+      cDfd.resolve("C DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+      expect(sequence).toEqual(["/a complete", "/b complete", "/c complete"]);
+    });
+
+    it("handles promises for interrupted popstate navigations", async () => {
+      let indexDfd = createDeferred();
+      let aDfd = createDeferred();
+      let bDfd = createDeferred();
+
+      let router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          {
+            id: "index",
+            path: "/",
+            loader: () => indexDfd.promise,
+          },
+          {
+            id: "a",
+            path: "/a",
+            loader: () => aDfd.promise,
+          },
+          {
+            id: "b",
+            path: "/b",
+            loader: () => bDfd.promise,
+          },
+        ],
+        hydrationData: {
+          loaderData: {
+            index: "INDEX DATA",
+          },
+        },
+      });
+
+      let sequence: string[] = [];
+      router.navigate("/a").then(() => sequence.push("/a complete"));
+      aDfd.resolve("A DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+
+      router.navigate(-1).then(() => sequence.push("back complete"));
+      await tick();
+      expect(sequence).toEqual(["/a complete"]);
+
+      router.navigate("/b").then(() => sequence.push("/b complete"));
+      await tick();
+      expect(sequence).toEqual(["/a complete", "back complete"]);
+
+      indexDfd.resolve("A DATA");
+      await tick();
+      expect(router.state.navigation.state).toBe("loading");
+      expect(sequence).toEqual(["/a complete", "back complete"]);
+
+      bDfd.resolve("B DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+      expect(sequence).toEqual(["/a complete", "back complete", "/b complete"]);
+    });
+
+    it("handles promises for fetcher redirect interrupted popstate navigations", async () => {
+      let indexDfd = createDeferred();
+      let bDfd = createDeferred();
+
+      let router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          {
+            id: "index",
+            path: "/",
+            loader: () => indexDfd.promise,
+          },
+          {
+            id: "a",
+            path: "/a",
+          },
+          {
+            id: "b",
+            path: "/b",
+            loader: () => bDfd.promise,
+          },
+          {
+            id: "fetch",
+            path: "/fetch",
+            loader: () => redirect("/b"),
+          },
+        ],
+        hydrationData: {
+          loaderData: {
+            index: "INDEX DATA",
+          },
+        },
+      });
+
+      let sequence: string[] = [];
+      router.navigate("/a").then(() => sequence.push("/a complete"));
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+
+      router.navigate(-1).then(() => sequence.push("back complete"));
+      await tick();
+      expect(sequence).toEqual(["/a complete"]);
+
+      router
+        .fetch("key", "a", "/fetch")
+        .then(() => sequence.push("fetch redirect complete"));
+      await tick();
+      expect(sequence).toEqual(["/a complete", "back complete"]);
+
+      indexDfd.resolve("A DATA"); // no-op
+      await tick();
+      expect(router.state.navigation.state).toBe("loading");
+      expect(sequence).toEqual(["/a complete", "back complete"]);
+
+      bDfd.resolve("B DATA");
+      await tick();
+      expect(router.state.navigation).toBe(IDLE_NAVIGATION);
+      expect(sequence).toEqual([
+        "/a complete",
+        "back complete",
+        "fetch redirect complete",
+      ]);
+    });
   });
 
   describe("data loading (new)", () => {
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index e4ec6e080e..fa2d6b03e5 100644
--- a/packages/react-router/lib/components.tsx
+++ b/packages/react-router/lib/components.tsx
@@ -74,12 +74,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 } = {
@@ -360,143 +381,25 @@ 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`, all state updates are wrapped in
+   *   `React.startTransition`
+   *   - This can lead to buggy behaviors if you are wrapping your own
+   *     navigations/fetchers in `startTransition`.
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and router state changes will be wrapped in
+   *   `React.startTransition` and also 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 any navigations or state changes.
+   *
+   * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -528,14 +431,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,
@@ -599,8 +505,15 @@ export function RouterProvider({
       if (!viewTransitionOpts || !isViewTransitionAvailable) {
         if (reactDomFlushSyncImpl && flushSync) {
           reactDomFlushSyncImpl(() => setStateImpl(newState));
+        } else if (unstable_useTransitions === false) {
+          setStateImpl(newState);
         } else {
-          React.startTransition(() => setStateImpl(newState));
+          React.startTransition(() => {
+            if (unstable_useTransitions === true) {
+              setOptimisticState((s) => getOptimisticRouterState(s, newState));
+            }
+            setStateImpl(newState);
+          });
         }
         return;
       }
@@ -668,6 +581,8 @@ export function RouterProvider({
       reactDomFlushSyncImpl,
       transition,
       renderDfd,
+      unstable_useTransitions,
+      setOptimisticState,
       unstable_onError,
     ],
   );
@@ -692,7 +607,16 @@ export function RouterProvider({
       let newState = pendingState;
       let renderPromise = renderDfd.promise;
       let transition = router.window.document.startViewTransition(async () => {
-        React.startTransition(() => setStateImpl(newState));
+        if (unstable_useTransitions === false) {
+          setStateImpl(newState);
+        } else {
+          React.startTransition(() => {
+            if (unstable_useTransitions === true) {
+              setOptimisticState((s) => getOptimisticRouterState(s, newState));
+            }
+            setStateImpl(newState);
+          });
+        }
         await renderPromise;
       });
       transition.finished.finally(() => {
@@ -703,7 +627,13 @@ export function RouterProvider({
       });
       setTransition(transition);
     }
-  }, [pendingState, renderDfd, router.window]);
+  }, [
+    pendingState,
+    renderDfd,
+    router.window,
+    unstable_useTransitions,
+    setOptimisticState,
+  ]);
 
   // When the new location finally renders and is committed to the DOM, this
   // effect will run to resolve the transition
@@ -781,6 +711,7 @@ export function RouterProvider({
                 location={state.location}
                 navigationType={state.historyAction}
                 navigator={navigator}
+                unstable_useTransitions={unstable_useTransitions === true}
               >
                 <MemoizedDataRoutes
                   routes={router.routes}
@@ -798,6 +729,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);
 
@@ -835,6 +793,21 @@ 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).
+   *
+   * - When left `undefined`, all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `false`, the router will not leverage `React.startTransition`
+   *   on any navigations or state changes.
+   *
+   * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -848,6 +821,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.
  */
@@ -856,6 +830,7 @@ export function MemoryRouter({
   children,
   initialEntries,
   initialIndex,
+  unstable_useTransitions,
 }: MemoryRouterProps): React.ReactElement {
   let historyRef = React.useRef<MemoryHistory>();
   if (historyRef.current == null) {
@@ -873,9 +848,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]);
@@ -887,6 +866,7 @@ export function MemoryRouter({
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1300,6 +1280,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;
 }
 
 /**
@@ -1319,6 +1303,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}
  */
@@ -1329,6 +1314,7 @@ export function Router({
   navigationType = NavigationType.Pop,
   navigator,
   static: staticProp = false,
+  unstable_useTransitions,
 }: RouterProps): React.ReactElement | null {
   invariant(
     !useInRouterContext(),
@@ -1344,9 +1330,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..ed31101f3a 100644
--- a/packages/react-router/lib/context.ts
+++ b/packages/react-router/lib/context.ts
@@ -87,8 +87,9 @@ export type PatchRoutesOnNavigationFunction =
 
 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 +179,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..41437a02f3 100644
--- a/packages/react-router/lib/dom-export/hydrated-router.tsx
+++ b/packages/react-router/lib/dom-export/hydrated-router.tsx
@@ -298,6 +298,25 @@ 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`, all state updates are wrapped in
+   *   `React.startTransition`
+   *   - This can lead to buggy behaviors if you are wrapping your own
+   *     navigations/fetchers in `startTransition`.
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and router state changes will be wrapped in
+   *   `React.startTransition` and also 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 any navigations or state changes.
+   *
+   * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -404,6 +423,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..61ee05cf4b 100644
--- a/packages/react-router/lib/dom/lib.tsx
+++ b/packages/react-router/lib/dom/lib.tsx
@@ -932,6 +932,21 @@ 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).
+   *
+   * - When left `undefined`, all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `false`, the router will not leverage `React.startTransition`
+   *   on any navigations or state changes.
+   *
+   * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
+   */
+  unstable_useTransitions?: boolean;
   /**
    * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
    * override. Defaults to the global `window` instance
@@ -949,6 +964,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 +972,7 @@ export interface BrowserRouterProps {
 export function BrowserRouter({
   basename,
   children,
+  unstable_useTransitions,
   window,
 }: BrowserRouterProps) {
   let historyRef = React.useRef<BrowserHistory>();
@@ -970,9 +987,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 +1005,7 @@ export function BrowserRouter({
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1000,6 +1022,21 @@ 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).
+   *
+   * - When left `undefined`, all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `false`, the router will not leverage `React.startTransition`
+   *   on any navigations or state changes.
+   *
+   * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
+   */
+  unstable_useTransitions?: boolean;
   /**
    * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
    * override. Defaults to the global `window` instance
@@ -1018,11 +1055,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 +1078,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 +1096,7 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1069,6 +1117,21 @@ 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).
+   *
+   * - When left `undefined`, all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and all router state updates are wrapped in
+   *   `React.startTransition`
+   * - When set to `false`, the router will not leverage `React.startTransition`
+   *   on any navigations or state changes.
+   *
+   * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
+   */
+  unstable_useTransitions?: boolean;
 }
 
 /**
@@ -1086,6 +1149,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 +1157,7 @@ export function HistoryRouter({
   basename,
   children,
   history,
+  unstable_useTransitions,
 }: HistoryRouterProps) {
   let [state, setStateImpl] = React.useState({
     action: history.action,
@@ -1100,9 +1165,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 +1183,7 @@ export function HistoryRouter({
       location={state.location}
       navigationType={state.action}
       navigator={history}
+      unstable_useTransitions={unstable_useTransitions === true}
     />
   );
 }
@@ -1338,7 +1408,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 +1460,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       preventScrollReset,
       relative,
       viewTransition,
+      unstable_useTransitions,
     });
     function handleClick(
       event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -1932,6 +2004,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 +2024,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 !== false) {
+        // @ts-expect-error Needs React 19 types
+        React.startTransition(() => doSubmit());
+      } else {
+        doSubmit();
+      }
     };
 
     return (
@@ -2175,6 +2256,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 +2270,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     preventScrollReset,
     relative,
     viewTransition,
+    unstable_useTransitions,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
@@ -2193,6 +2278,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 +2297,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 +2325,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
       preventScrollReset,
       relative,
       viewTransition,
+      unstable_useTransitions,
     ],
   );
 }
@@ -2539,6 +2634,9 @@ export function useSubmit(): SubmitFunction {
   let { basename } = React.useContext(NavigationContext);
   let currentRouteId = useRouteId();
 
+  let routerFetch = router.fetch;
+  let routerNavigate = router.navigate;
+
   return React.useCallback<SubmitFunction>(
     async (target, options = {}) => {
       let { action, method, encType, formData, body } = getFormSubmissionInfo(
@@ -2548,7 +2646,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 +2655,7 @@ export function useSubmit(): SubmitFunction {
           flushSync: options.flushSync,
         });
       } else {
-        await router.navigate(options.action || action, {
+        await routerNavigate(options.action || action, {
           preventScrollReset: options.preventScrollReset,
           formData,
           body,
@@ -2571,7 +2669,7 @@ export function useSubmit(): SubmitFunction {
         });
       }
     },
-    [router, basename, currentRouteId],
+    [routerFetch, routerNavigate, basename, currentRouteId],
   );
 }
 
@@ -2868,19 +2966,21 @@ export function useFetcher<T = any>({
     setFetcherKey(key);
   }
 
+  let { deleteFetcher, getFetcher, resetFetcher, fetch: routerFetch } = router;
+
   // 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 +2997,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/hooks.tsx b/packages/react-router/lib/hooks.tsx
index 83bd86f734..854f94e95f 100644
--- a/packages/react-router/lib/hooks.tsx
+++ b/packages/react-router/lib/hooks.tsx
@@ -1840,7 +1840,7 @@ function useNavigateStable(): NavigateFunction {
       if (!activeRef.current) return;
 
       if (typeof to === "number") {
-        router.navigate(to);
+        await router.navigate(to);
       } else {
         await router.navigate(to, { fromRouteId: id, ...options });
       }
diff --git a/packages/react-router/lib/router/router.ts b/packages/react-router/lib/router/router.ts
index 6e900b7c5c..70f2bf48d6 100644
--- a/packages/react-router/lib/router/router.ts
+++ b/packages/react-router/lib/router/router.ts
@@ -1042,6 +1042,11 @@ export function createRouter(init: RouterInit): Router {
   // Current navigation in progress (to be committed in completeNavigation)
   let pendingAction: NavigationType = NavigationType.Pop;
 
+  // Deferred to use for tracking popstate navigations
+  let pendingPopstateNavigationDfd: ReturnType<
+    typeof createDeferred<void>
+  > | null = null;
+
   // Should the current navigation prevent the scroll reset if scroll cannot
   // be restored?
   let pendingPreventScrollReset = false;
@@ -1110,6 +1115,7 @@ export function createRouter(init: RouterInit): Router {
   // a POP navigation that was blocked by the user without touching router state
   let unblockBlockerHistoryUpdate: (() => void) | undefined = undefined;
 
+  // Revalidation deferred to be resolved next time we land through completeNavigation
   let pendingRevalidationDfd: ReturnType<typeof createDeferred<void>> | null =
     null;
 
@@ -1174,6 +1180,11 @@ export function createRouter(init: RouterInit): Router {
               updateState({ blockers });
             },
           });
+
+          // Resolve the promise for the blocked popstate
+          pendingPopstateNavigationDfd?.resolve();
+          pendingPopstateNavigationDfd = null;
+
           return;
         }
 
@@ -1449,6 +1460,8 @@ export function createRouter(init: RouterInit): Router {
     pendingViewTransitionEnabled = false;
     isUninterruptedRevalidation = false;
     isRevalidationRequired = false;
+    pendingPopstateNavigationDfd?.resolve();
+    pendingPopstateNavigationDfd = null;
     pendingRevalidationDfd?.resolve();
     pendingRevalidationDfd = null;
   }
@@ -1459,9 +1472,31 @@ export function createRouter(init: RouterInit): Router {
     to: number | To | null,
     opts?: RouterNavigateOptions,
   ) {
+    // If another popstate is pending and we're about to interrupt it, resolve
+    // the promise since we'll never reach completeNavigation for *that* popstate
+    pendingPopstateNavigationDfd?.resolve();
+    pendingPopstateNavigationDfd = null;
+
     if (typeof to === "number") {
+      // Track this popstate with a deferred so we can expose the promise back
+      // out through useNNavigate.  This will be resolved in one of the following
+      // places:
+      //  - completeNavigation if we are not interrupted
+      //  - history listener if this navigation is blocked
+      //  - this function if another navigation is triggered that interrupts us
+      //  - startRedirectNavigation if we are interrupted by a fetcher-driven
+      //    redirect
+      if (!pendingPopstateNavigationDfd) {
+        pendingPopstateNavigationDfd = createDeferred<void>();
+      }
+
+      let promise = pendingPopstateNavigationDfd.promise;
       init.history.go(to);
-      return;
+
+      // Use a local copy here because memory router popstates can be fully synchronous
+      // so it's possible completeNavigation has already cleared out the pending
+      // variable by now
+      return promise;
     }
 
     let normalizedPath = normalizeTo(
@@ -2848,6 +2883,14 @@ export function createRouter(init: RouterInit): Router {
       replace?: boolean;
     } = {},
   ) {
+    // If we are interrupting a popstate navigation from a fetcher call that
+    // redirected, resolve the pending promise since we won't reach completeNavigation
+    // for that popstate navigation
+    if (!isNavigation) {
+      pendingPopstateNavigationDfd?.resolve();
+      pendingPopstateNavigationDfd = null;
+    }
+
     if (redirect.response.headers.has("X-Remix-Revalidate")) {
       isRevalidationRequired = true;
     }
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 || []);
+  });
+}