diff --git a/.changeset/lift-start-view-transition.md b/.changeset/lift-start-view-transition.md
new file mode 100644
index 0000000000..f469f68be4
--- /dev/null
+++ b/.changeset/lift-start-view-transition.md
@@ -0,0 +1,6 @@
+---
+"react-router-dom": patch
+"react-router": patch
+---
+
+Export a separate `RouterProvider` from `react-router-dom` with `startViewTransition` support
diff --git a/.changeset/start-view-transition.md b/.changeset/start-view-transition.md
index 55a09e5f05..fe65a08e45 100644
--- a/.changeset/start-view-transition.md
+++ b/.changeset/start-view-transition.md
@@ -1,6 +1,5 @@
 ---
 "react-router-dom": minor
-"react-router": minor
 "@remix-run/router": minor
 ---
 
diff --git a/package.json b/package.json
index 9e6cc7a28f..f1746f97c7 100644
--- a/package.json
+++ b/package.json
@@ -113,16 +113,16 @@
       "none": "48.3 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "15.2 kB"
+      "none": "13.9 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "17.61 kB"
+      "none": "16.3 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "13.61 kB"
+      "none": "15.9 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "19.91 kB"
+      "none": "22.1 kB"
     }
   }
 }
diff --git a/packages/react-router-dom/__tests__/exports-test.tsx b/packages/react-router-dom/__tests__/exports-test.tsx
index e3b479d6f1..dcf2e22ba7 100644
--- a/packages/react-router-dom/__tests__/exports-test.tsx
+++ b/packages/react-router-dom/__tests__/exports-test.tsx
@@ -6,16 +6,23 @@ let nonReExportedKeys = new Set([
   "UNSAFE_useRoutesImpl",
 ]);
 
+let modifiedExports = new Set(["RouterProvider"]);
+
 describe("react-router-dom", () => {
   for (let key in ReactRouter) {
-    if (!nonReExportedKeys.has(key)) {
-      it(`re-exports ${key} from react-router`, () => {
-        expect(ReactRouterDOM[key]).toBe(ReactRouter[key]);
-      });
-    } else {
+    if (nonReExportedKeys.has(key)) {
       it(`does not re-export ${key} from react-router`, () => {
         expect(ReactRouterDOM[key]).toBe(undefined);
       });
+    } else if (modifiedExports.has(key)) {
+      it(`re-exports a different version of ${key}`, () => {
+        expect(ReactRouterDOM[key]).toBeDefined();
+        expect(ReactRouterDOM[key]).not.toBe(ReactRouter[key]);
+      });
+    } else {
+      it(`re-exports ${key} from react-router`, () => {
+        expect(ReactRouterDOM[key]).toBe(ReactRouter[key]);
+      });
     }
   }
 });
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index 3f76a09afd..8c62c56893 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -4,12 +4,15 @@
  */
 import * as React from "react";
 import type {
+  DataRouteObject,
   FutureConfig,
   Location,
   NavigateOptions,
   NavigationType,
+  Navigator,
   RelativeRoutingType,
   RouteObject,
+  RouterProviderProps,
   To,
 } from "react-router";
 import {
@@ -26,9 +29,9 @@ import {
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
   UNSAFE_NavigationContext as NavigationContext,
   UNSAFE_RouteContext as RouteContext,
-  UNSAFE_ViewTransitionContext as ViewTransitionContext,
   UNSAFE_mapRouteProperties as mapRouteProperties,
   UNSAFE_useRouteId as useRouteId,
+  UNSAFE_useRoutesImpl as useRoutesImpl,
 } from "react-router";
 import type {
   BrowserHistory,
@@ -43,6 +46,8 @@ import type {
   HydrationState,
   Router as RemixRouter,
   V7_FormMethod,
+  RouterState,
+  RouterSubscriber,
 } from "@remix-run/router";
 import {
   createRouter,
@@ -143,7 +148,6 @@ export {
   Outlet,
   Route,
   Router,
-  RouterProvider,
   Routes,
   createMemoryRouter,
   createPath,
@@ -203,13 +207,15 @@ export {
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
   UNSAFE_RouteContext,
-  UNSAFE_ViewTransitionContext,
   UNSAFE_useRouteId,
 } from "react-router";
 //#endregion
 
 declare global {
   var __staticRouterHydrationData: HydrationState | undefined;
+  interface Document {
+    startViewTransition(cb: () => Promise<void> | void): ViewTransition;
+  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -320,6 +326,31 @@ function deserializeErrors(
 
 //#endregion
 
+////////////////////////////////////////////////////////////////////////////////
+//#region Contexts
+////////////////////////////////////////////////////////////////////////////////
+
+type ViewTransitionContextObject =
+  | {
+      isTransitioning: false;
+    }
+  | {
+      isTransitioning: true;
+      currentLocation: Location;
+      nextLocation: Location;
+    };
+
+const ViewTransitionContext = React.createContext<ViewTransitionContextObject>({
+  isTransitioning: false,
+});
+if (__DEV__) {
+  ViewTransitionContext.displayName = "ViewTransition";
+}
+
+export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
+
+//#endregion
+
 ////////////////////////////////////////////////////////////////////////////////
 //#region Components
 ////////////////////////////////////////////////////////////////////////////////
@@ -348,6 +379,245 @@ function deserializeErrors(
 const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
 
+function startTransitionSafe(cb: () => void) {
+  if (startTransitionImpl) {
+    startTransitionImpl(cb);
+  } else {
+    cb();
+  }
+}
+
+interface ViewTransition {
+  finished: Promise<void>;
+  ready: Promise<void>;
+  updateCallbackDone: Promise<void>;
+  skipTransition(): void;
+}
+
+class Deferred<T> {
+  status: "pending" | "resolved" | "rejected" = "pending";
+  promise: Promise<T>;
+  // @ts-expect-error - no initializer
+  resolve: (value: T) => void;
+  // @ts-expect-error - no initializer
+  reject: (reason?: unknown) => void;
+  constructor() {
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = (value) => {
+        if (this.status === "pending") {
+          this.status = "resolved";
+          resolve(value);
+        }
+      };
+      this.reject = (reason) => {
+        if (this.status === "pending") {
+          this.status = "rejected";
+          reject(reason);
+        }
+      };
+    });
+  }
+}
+
+/**
+ * Given a Remix Router instance, render the appropriate UI
+ */
+export function RouterProvider({
+  fallbackElement,
+  router,
+  future,
+}: RouterProviderProps): React.ReactElement {
+  let [state, setStateImpl] = React.useState(router.state);
+  let [pendingState, setPendingState] = React.useState<RouterState>();
+  let [vtContext, setVtContext] = React.useState<ViewTransitionContextObject>({
+    isTransitioning: false,
+  });
+  let [renderDfd, setRenderDfd] = React.useState<Deferred<void>>();
+  let [transition, setTransition] = React.useState<ViewTransition>();
+  let [interruption, setInterruption] = React.useState<{
+    state: RouterState;
+    currentLocation: Location;
+    nextLocation: Location;
+  }>();
+  let { v7_startTransition } = future || {};
+
+  let optInStartTransition = React.useCallback(
+    (cb: () => void) => {
+      if (v7_startTransition) {
+        startTransitionSafe(cb);
+      } else {
+        cb();
+      }
+    },
+    [v7_startTransition]
+  );
+
+  let setState = React.useCallback<RouterSubscriber>(
+    (
+      newState: RouterState,
+      { unstable_viewTransitionOpts: viewTransitionOpts }
+    ) => {
+      if (
+        !viewTransitionOpts ||
+        router.window == null ||
+        typeof router.window.document.startViewTransition !== "function"
+      ) {
+        // Mid-navigation state update, or startViewTransition isn't available
+        optInStartTransition(() => setStateImpl(newState));
+      } else if (transition && renderDfd) {
+        // Interrupting an in-progress transition, cancel and let everything flush
+        // out, and then kick off a new transition from the interruption state
+        renderDfd.resolve();
+        transition.skipTransition();
+        setInterruption({
+          state: newState,
+          currentLocation: viewTransitionOpts.currentLocation,
+          nextLocation: viewTransitionOpts.nextLocation,
+        });
+      } else {
+        // Completed navigation update with opted-in view transitions, let 'er rip
+        setPendingState(newState);
+        setVtContext({
+          isTransitioning: true,
+          currentLocation: viewTransitionOpts.currentLocation,
+          nextLocation: viewTransitionOpts.nextLocation,
+        });
+      }
+    },
+    [optInStartTransition, transition, renderDfd, router.window]
+  );
+
+  // Need to use a layout effect here so we are subscribed early enough to
+  // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
+  React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
+
+  // When we start a view transition, create a Deferred we can use for the
+  // eventual "completed" render
+  React.useEffect(() => {
+    if (vtContext.isTransitioning) {
+      setRenderDfd(new Deferred<void>());
+    }
+  }, [vtContext.isTransitioning]);
+
+  // Once the deferred is created, kick off startViewTransition() to update the
+  // DOM and then wait on the Deferred to resolve (indicating the DOM update has
+  // happened)
+  React.useEffect(() => {
+    if (renderDfd && pendingState && router.window) {
+      let newState = pendingState;
+      let renderPromise = renderDfd.promise;
+      let transition = router.window.document.startViewTransition(async () => {
+        optInStartTransition(() => setStateImpl(newState));
+        await renderPromise;
+      });
+      transition.finished.finally(() => {
+        setRenderDfd(undefined);
+        setTransition(undefined);
+        setPendingState(undefined);
+        setVtContext({ isTransitioning: false });
+      });
+      setTransition(transition);
+    }
+  }, [optInStartTransition, pendingState, renderDfd, router.window]);
+
+  // When the new location finally renders and is committed to the DOM, this
+  // effect will run to resolve the transition
+  React.useEffect(() => {
+    if (
+      renderDfd &&
+      pendingState &&
+      state.location.key === pendingState.location.key
+    ) {
+      renderDfd.resolve();
+    }
+  }, [renderDfd, transition, state.location, pendingState]);
+
+  // If we get interrupted with a new navigation during a transition, we skip
+  // the active transition, let it cleanup, then kick it off again here
+  React.useEffect(() => {
+    if (!vtContext.isTransitioning && interruption) {
+      setPendingState(interruption.state);
+      setVtContext({
+        isTransitioning: true,
+        currentLocation: interruption.currentLocation,
+        nextLocation: interruption.nextLocation,
+      });
+      setInterruption(undefined);
+    }
+  }, [vtContext.isTransitioning, interruption]);
+
+  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,
+    }),
+    [router, navigator, basename]
+  );
+
+  // 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}>
+          <ViewTransitionContext.Provider value={vtContext}>
+            <Router
+              basename={basename}
+              location={state.location}
+              navigationType={state.historyAction}
+              navigator={navigator}
+            >
+              {state.initialized ? (
+                <DataRoutes routes={router.routes} state={state} />
+              ) : (
+                fallbackElement
+              )}
+            </Router>
+          </ViewTransitionContext.Provider>
+        </DataRouterStateContext.Provider>
+      </DataRouterContext.Provider>
+      {null}
+    </>
+  );
+}
+
+function DataRoutes({
+  routes,
+  state,
+}: {
+  routes: DataRouteObject[];
+  state: RouterState;
+}): React.ReactElement | null {
+  return useRoutesImpl(routes, undefined, state);
+}
+
 export interface BrowserRouterProps {
   basename?: string;
   children?: React.ReactNode;
@@ -920,7 +1190,6 @@ enum DataRouterHook {
   UseSubmit = "useSubmit",
   UseSubmitFetcher = "useSubmitFetcher",
   UseFetcher = "useFetcher",
-  useViewTransitionStates = "useViewTransitionStates",
   useViewTransitionState = "useViewTransitionState",
 }
 
@@ -1543,37 +1812,45 @@ function useViewTransitionState(
   opts: { relative?: RelativeRoutingType } = {}
 ) {
   let vtContext = React.useContext(ViewTransitionContext);
+
+  invariant(
+    vtContext != null,
+    "`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  " +
+      "Did you accidentally import `RouterProvider` from `react-router`?"
+  );
+
   let { basename } = useDataRouterContext(
     DataRouterHook.useViewTransitionState
   );
   let path = useResolvedPath(to, { relative: opts.relative });
-  if (vtContext.isTransitioning) {
-    let currentPath =
-      stripBasename(vtContext.currentLocation.pathname, basename) ||
-      vtContext.currentLocation.pathname;
-    let nextPath =
-      stripBasename(vtContext.nextLocation.pathname, basename) ||
-      vtContext.nextLocation.pathname;
-
-    // Transition is active if we're going to or coming from the indicated
-    // destination.  This ensures that other PUSH navigations that reverse
-    // an indicated transition apply.  I.e., on the list view you have:
-    //
-    //   <NavLink to="/details/1" unstable_viewTransition>
-    //
-    // If you click the breadcrumb back to the list view:
-    //
-    //   <NavLink to="/list" unstable_viewTransition>
-    //
-    // We should apply the transition because it's indicated as active going
-    // from /list -> /details/1 and therefore should be active on the reverse
-    // (even though this isn't strictly a POP reverse)
-    return (
-      matchPath(path.pathname, nextPath) != null ||
-      matchPath(path.pathname, currentPath) != null
-    );
+  if (!vtContext.isTransitioning) {
+    return false;
   }
-  return false;
+
+  let currentPath =
+    stripBasename(vtContext.currentLocation.pathname, basename) ||
+    vtContext.currentLocation.pathname;
+  let nextPath =
+    stripBasename(vtContext.nextLocation.pathname, basename) ||
+    vtContext.nextLocation.pathname;
+
+  // Transition is active if we're going to or coming from the indicated
+  // destination.  This ensures that other PUSH navigations that reverse
+  // an indicated transition apply.  I.e., on the list view you have:
+  //
+  //   <NavLink to="/details/1" unstable_viewTransition>
+  //
+  // If you click the breadcrumb back to the list view:
+  //
+  //   <NavLink to="/list" unstable_viewTransition>
+  //
+  // We should apply the transition because it's indicated as active going
+  // from /list -> /details/1 and therefore should be active on the reverse
+  // (even though this isn't strictly a POP reverse)
+  return (
+    matchPath(path.pathname, nextPath) != null ||
+    matchPath(path.pathname, currentPath) != null
+  );
 }
 
 export { useViewTransitionState as unstable_useViewTransitionState };
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
index 9622b961b6..7946218731 100644
--- a/packages/react-router-dom/server.tsx
+++ b/packages/react-router-dom/server.tsx
@@ -34,6 +34,7 @@ import {
   Router,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
+  UNSAFE_ViewTransitionContext as ViewTransitionContext,
 } from "react-router-dom";
 
 export interface StaticRouterProps {
@@ -131,15 +132,17 @@ export function StaticRouterProvider({
     <>
       <DataRouterContext.Provider value={dataRouterContext}>
         <DataRouterStateContext.Provider value={state}>
-          <Router
-            basename={dataRouterContext.basename}
-            location={state.location}
-            navigationType={state.historyAction}
-            navigator={dataRouterContext.navigator}
-            static={dataRouterContext.static}
-          >
-            <DataRoutes routes={router.routes} state={state} />
-          </Router>
+          <ViewTransitionContext.Provider value={{ isTransitioning: false }}>
+            <Router
+              basename={dataRouterContext.basename}
+              location={state.location}
+              navigationType={state.historyAction}
+              navigator={dataRouterContext.navigator}
+              static={dataRouterContext.static}
+            >
+              <DataRoutes routes={router.routes} state={state} />
+            </Router>
+          </ViewTransitionContext.Provider>
         </DataRouterStateContext.Provider>
       </DataRouterContext.Provider>
       {hydrateScript ? (
diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
index 0b960fa82f..4ac70a3422 100644
--- a/packages/react-router/index.ts
+++ b/packages/react-router/index.ts
@@ -89,7 +89,6 @@ import {
   LocationContext,
   NavigationContext,
   RouteContext,
-  ViewTransitionContext,
 } from "./lib/context";
 import type { NavigateFunction } from "./lib/hooks";
 import {
@@ -309,7 +308,6 @@ export {
   LocationContext as UNSAFE_LocationContext,
   NavigationContext as UNSAFE_NavigationContext,
   RouteContext as UNSAFE_RouteContext,
-  ViewTransitionContext as UNSAFE_ViewTransitionContext,
   mapRouteProperties as UNSAFE_mapRouteProperties,
   useRouteId as UNSAFE_useRouteId,
   useRoutesImpl as UNSAFE_useRoutesImpl,
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index 86dfbae3cc..4ec7dbc856 100644
--- a/packages/react-router/lib/components.tsx
+++ b/packages/react-router/lib/components.tsx
@@ -30,7 +30,6 @@ import type {
   NonIndexRouteObject,
   RouteMatch,
   RouteObject,
-  ViewTransitionContextObject,
 } from "./context";
 import {
   AwaitContext,
@@ -39,7 +38,6 @@ import {
   LocationContext,
   NavigationContext,
   RouteContext,
-  ViewTransitionContext,
 } from "./context";
 import {
   _renderMatches,
@@ -52,19 +50,6 @@ import {
   useRoutesImpl,
 } from "./hooks";
 
-interface ViewTransition {
-  finished: Promise<void>;
-  ready: Promise<void>;
-  updateCallbackDone: Promise<void>;
-  skipTransition(): void;
-}
-
-declare global {
-  interface Document {
-    startViewTransition(cb: () => Promise<void> | void): ViewTransition;
-  }
-}
-
 export interface FutureConfig {
   v7_startTransition: boolean;
 }
@@ -99,39 +84,6 @@ export interface RouterProviderProps {
 const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
 
-function startTransitionSafe(cb: () => void) {
-  if (startTransitionImpl) {
-    startTransitionImpl(cb);
-  } else {
-    cb();
-  }
-}
-
-class Deferred<T> {
-  status: "pending" | "resolved" | "rejected" = "pending";
-  promise: Promise<T>;
-  // @ts-expect-error - no initializer
-  resolve: (value: T) => void;
-  // @ts-expect-error - no initializer
-  reject: (reason?: unknown) => void;
-  constructor() {
-    this.promise = new Promise((resolve, reject) => {
-      this.resolve = (value) => {
-        if (this.status === "pending") {
-          this.status = "resolved";
-          resolve(value);
-        }
-      };
-      this.reject = (reason) => {
-        if (this.status === "pending") {
-          this.status = "rejected";
-          reject(reason);
-        }
-      };
-    });
-  }
-}
-
 /**
  * Given a Remix Router instance, render the appropriate UI
  */
@@ -141,124 +93,23 @@ export function RouterProvider({
   future,
 }: RouterProviderProps): React.ReactElement {
   let [state, setStateImpl] = React.useState(router.state);
-  let [pendingState, setPendingState] = React.useState<RouterState>();
-  let [vtContext, setVtContext] = React.useState<ViewTransitionContextObject>({
-    isTransitioning: false,
-  });
-  let [renderDfd, setRenderDfd] = React.useState<Deferred<void>>();
-  let [transition, setTransition] = React.useState<ViewTransition>();
-  let [interruption, setInterruption] = React.useState<{
-    state: RouterState;
-    currentLocation: Location;
-    nextLocation: Location;
-  }>();
   let { v7_startTransition } = future || {};
 
-  let optInStartTransition = React.useCallback(
-    (cb: () => void) => {
-      if (v7_startTransition) {
-        startTransitionSafe(cb);
-      } else {
-        cb();
-      }
-    },
-    [v7_startTransition]
-  );
-
   let setState = React.useCallback<RouterSubscriber>(
-    (
-      newState: RouterState,
-      { unstable_viewTransitionOpts: viewTransitionOpts }
-    ) => {
-      if (
-        !viewTransitionOpts ||
-        router.window == null ||
-        typeof router.window.document.startViewTransition !== "function"
-      ) {
-        // Mid-navigation state update, or startViewTransition isn't available
-        optInStartTransition(() => setStateImpl(newState));
-      } else if (transition && renderDfd) {
-        // Interrupting an in-progress transition, cancel and let everything flush
-        // out, and then kick off a new transition from the interruption state
-        renderDfd.resolve();
-        transition.skipTransition();
-        setInterruption({
-          state: newState,
-          currentLocation: viewTransitionOpts.currentLocation,
-          nextLocation: viewTransitionOpts.nextLocation,
-        });
+    (newState: RouterState) => {
+      if (v7_startTransition && startTransitionImpl) {
+        startTransitionImpl(() => setStateImpl(newState));
       } else {
-        // Completed navigation update with opted-in view transitions, let 'er rip
-        setPendingState(newState);
-        setVtContext({
-          isTransitioning: true,
-          currentLocation: viewTransitionOpts.currentLocation,
-          nextLocation: viewTransitionOpts.nextLocation,
-        });
+        setStateImpl(newState);
       }
     },
-    [optInStartTransition, transition, renderDfd, router.window]
+    [setStateImpl, v7_startTransition]
   );
 
   // Need to use a layout effect here so we are subscribed early enough to
   // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
   React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
 
-  // When we start a view transition, create a Deferred we can use for the
-  // eventual "completed" render
-  React.useEffect(() => {
-    if (vtContext.isTransitioning) {
-      setRenderDfd(new Deferred<void>());
-    }
-  }, [vtContext.isTransitioning]);
-
-  // Once the deferred is created, kick off startViewTransition() to update the
-  // DOM and then wait on the Deferred to resolve (indicating the DOM update has
-  // happened)
-  React.useEffect(() => {
-    if (renderDfd && pendingState && router.window) {
-      let newState = pendingState;
-      let renderPromise = renderDfd.promise;
-      let transition = router.window.document.startViewTransition(async () => {
-        optInStartTransition(() => setStateImpl(newState));
-        await renderPromise;
-      });
-      transition.finished.finally(() => {
-        setRenderDfd(undefined);
-        setTransition(undefined);
-        setPendingState(undefined);
-        setVtContext({ isTransitioning: false });
-      });
-      setTransition(transition);
-    }
-  }, [optInStartTransition, pendingState, renderDfd, router.window]);
-
-  // When the new location finally renders and is committed to the DOM, this
-  // effect will run to resolve the transition
-  React.useEffect(() => {
-    if (
-      renderDfd &&
-      pendingState &&
-      state.location.key === pendingState.location.key
-    ) {
-      renderDfd.resolve();
-    }
-  }, [renderDfd, transition, state.location, pendingState]);
-
-  // If we get interrupted with a new navigation during a transition, we skip
-  // the active transition, let it cleanup, then kick it off again here
-  React.useEffect(() => {
-    if (!vtContext.isTransitioning && interruption) {
-      setPendingState(interruption.state);
-      setVtContext({
-        isTransitioning: true,
-        currentLocation: interruption.currentLocation,
-        nextLocation: interruption.nextLocation,
-      });
-      setInterruption(undefined);
-    }
-  }, [vtContext.isTransitioning, interruption]);
-
   let navigator = React.useMemo((): Navigator => {
     return {
       createHref: router.createHref,
@@ -300,20 +151,18 @@ export function RouterProvider({
     <>
       <DataRouterContext.Provider value={dataRouterContext}>
         <DataRouterStateContext.Provider value={state}>
-          <ViewTransitionContext.Provider value={vtContext}>
-            <Router
-              basename={basename}
-              location={state.location}
-              navigationType={state.historyAction}
-              navigator={navigator}
-            >
-              {state.initialized ? (
-                <DataRoutes routes={router.routes} state={state} />
-              ) : (
-                fallbackElement
-              )}
-            </Router>
-          </ViewTransitionContext.Provider>
+          <Router
+            basename={basename}
+            location={state.location}
+            navigationType={state.historyAction}
+            navigator={navigator}
+          >
+            {state.initialized ? (
+              <DataRoutes routes={router.routes} state={state} />
+            ) : (
+              fallbackElement
+            )}
+          </Router>
         </DataRouterStateContext.Provider>
       </DataRouterContext.Provider>
       {null}
diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
index 0c9d796daf..212dc7160a 100644
--- a/packages/react-router/lib/context.ts
+++ b/packages/react-router/lib/context.ts
@@ -84,22 +84,6 @@ if (__DEV__) {
   DataRouterStateContext.displayName = "DataRouterState";
 }
 
-export type ViewTransitionContextObject =
-  | {
-      isTransitioning: false;
-    }
-  | {
-      isTransitioning: true;
-      currentLocation: Location;
-      nextLocation: Location;
-    };
-
-export const ViewTransitionContext =
-  React.createContext<ViewTransitionContextObject>({ isTransitioning: false });
-if (__DEV__) {
-  ViewTransitionContext.displayName = "ViewTransition";
-}
-
 export const AwaitContext = React.createContext<TrackedPromise | null>(null);
 if (__DEV__) {
   AwaitContext.displayName = "Await";