Let the shell say where home is, and drop the router from the call

The call reached for react-router in five places to send the user
"home": on leaving without a lobby, from the lobby's recents link, from
the post-call screen, from the error page's return button and from the
header logo. Home is the standalone app's home page; the call has no
idea where that is, and a component has no such place at all — its host
decides what follows a call. Yet the component had to mount a
MemoryRouter just so those hooks would not throw.

`useLeaveToHome` is the way home as the shell supplies it: the app
provides `navigate("/")` from inside its router, the component provides
nothing, and everything that used to link to "/" now either calls it or,
when there is none, offers no way out. The logo becomes a plain logo,
the recents and "not now" links disappear, the error page's button does
too. `ClientProvider`'s logout goes the same way. The component no
longer renders a router.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

component/index.tsx

@@ -44,7 +44,6 @@ import {
 } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { MemoryRouter } from "react-router-dom";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { ErrorBoundary } from "@sentry/react";
@@ -266,9 +265,6 @@ export const ElementCall: FC<ElementCallProps> = ({
     <I18nextProvider i18n={i18n}>
       <HostBridgeProvider value={hostBridge}>
         <UrlParamsProvider value={params}>
-          {/* Element Call's own navigation stays in memory, so that the
-          component cannot disturb the host's URL. */}
-          <MemoryRouter>
           <div ref={setContainer} className={styles.root}>
             {container !== null &&
               rtcSession !== null &&
@@ -303,7 +299,6 @@ export const ElementCall: FC<ElementCallProps> = ({
                 </RootElementProvider>
               )}
           </div>
-          </MemoryRouter>
         </UrlParamsProvider>
       </HostBridgeProvider>
     </I18nextProvider>

src/App.tsx

@@ -5,8 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type JSX, Suspense, useEffect, useState } from "react";
+import {
-import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
+  type FC,
+  type JSX,
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import {
+  BrowserRouter,
+  Route,
+  useLocation,
+  useNavigate,
+  Routes,
+} from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -40,6 +53,7 @@ import {
   nullHostBridge,
 } from "./HostBridge";
 import { useInitial } from "./useInitial";
+import { LeaveToHomeProvider } from "./LeaveToHomeContext";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -57,6 +71,20 @@ const LocationUrlParamsProvider: FC<SimpleProviderProps> = ({ children }) => {
   return <UrlParamsProvider value={urlParams}>{children}</UrlParamsProvider>;
 };
 
+/**
+ * Supplies the way home. Only the app has one — its home page, with the list
+ * of recent calls — so this, too, lives in the app shell.
+ */
+const HomeProvider: FC<SimpleProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const leaveToHome = useCallback(() => {
+    navigate("/")?.catch((e) => logger.error("Failed to navigate home", e));
+  }, [navigate]);
+  return (
+    <LeaveToHomeProvider value={leaveToHome}>{children}</LeaveToHomeProvider>
+  );
+};
+
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
   const { background } = useUrlParams();
@@ -143,6 +171,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
       <HostBridgeProvider value={hostBridge}>
         <BrowserRouter>
           <LocationUrlParamsProvider>
+            <HomeProvider>
               <BackgroundProvider>
                 <ThemeProvider>
                   <TooltipProvider>
@@ -152,6 +181,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
                   </TooltipProvider>
                 </ThemeProvider>
               </BackgroundProvider>
+            </HomeProvider>
           </LocationUrlParamsProvider>
         </BrowserRouter>
       </HostBridgeProvider>

src/ClientContext.tsx

@@ -16,13 +16,13 @@ import {
   useMemo,
   type JSX,
 } from "react";
-import { useNavigate } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
 
 import { ErrorPage } from "./FullScreenView";
 import { useHostBridge } from "./HostBridge";
+import { useLeaveToHome } from "./LeaveToHomeContext";
 import {
   PosthogAnalytics,
   RegistrationType,
@@ -146,7 +146,7 @@ interface Props {
 }
 
 export const ClientProvider: FC<Props> = ({ children, client }) => {
-  const navigate = useNavigate();
+  const leaveToHome = useLeaveToHome();
   const hostBridge = useHostBridge();
 
   // null = signed out, undefined = loading
@@ -249,10 +249,10 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
     await client.clearStores();
     clearSession();
     setInitClientState(null);
-    await navigate("/");
+    leaveToHome?.();
     PosthogAnalytics.instance.logout();
     PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
-  }, [navigate, initClientState?.client]);
+  }, [leaveToHome, initClientState?.client]);
 
   // To protect against multiple sessions writing to the same storage
   // simultaneously, we send a broadcast message that shuts down all other

src/ErrorView.tsx

@@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { RageshakeButton } from "./settings/RageshakeButton";
 import styles from "./ErrorView.module.css";
 import { useUrlParams } from "./UrlParams";
-import { LinkButton } from "./button";
+import { useLeaveToHome } from "./LeaveToHomeContext";
 import { useHostBridge } from "./HostBridge.ts";
 
 interface Props {
@@ -50,6 +50,7 @@ export const ErrorView: FC<Props> = ({
   const { t } = useTranslation();
   const { confineToRoom } = useUrlParams();
   const hostBridge = useHostBridge();
+  const leaveToHome = useLeaveToHome();
 
   const onReload = useCallback(() => {
     window.location.href = "/";
@@ -73,21 +74,19 @@ export const ErrorView: FC<Props> = ({
   };
 
   // Whether the error is considered fatal or pathname is `/` then reload the all app.
-  // If not then navigate to home page.
+  // If not then navigate to home page. Neither applies when there is no home
-  const ReturnToHomeButton = (): ReactElement => {
+  // to go to.
-    if (fatal || location.pathname === "/") {
+  const ReturnToHomeButton = (): ReactElement | null => {
+    if (leaveToHome === null) return null;
     return (
-        <Button kind="tertiary" className={styles.homeLink} onClick={onReload}>
+      <Button
+        kind="tertiary"
+        className={styles.homeLink}
+        onClick={fatal || location.pathname === "/" ? onReload : leaveToHome}
+      >
         {t("return_home_button")}
       </Button>
     );
-    } else {
-      return (
-        <LinkButton kind="tertiary" className={styles.homeLink} to="/">
-          {t("return_home_button")}
-        </LinkButton>
-      );
-    }
   };
 
   return (

src/Header.module.css

@@ -30,6 +30,11 @@ Please see LICENSE in the repository root for full details.
   display: none;
   align-items: center;
   text-decoration: none;
+  /* A button when it leads home, so undo the browser's button styling */
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
 }
 
 .leftNav.hideMobile {

src/Header.tsx

@@ -6,8 +6,13 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
+import {
-import { Link } from "react-router-dom";
+  type Ref,
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  useCallback,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
 import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -17,6 +22,7 @@ import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useRootSizeMatches } from "./useRootSize";
+import { useLeaveToHome } from "./LeaveToHomeContext";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -112,17 +118,30 @@ interface HeaderLogoProps {
   className?: string;
 }
 
+/**
+ * The logo, which is also the way home — when there is a home to go to. As a
+ * component there is not, and it is just the logo.
+ */
 export const HeaderLogo: FC<HeaderLogoProps> = ({ className }) => {
   const { t } = useTranslation();
+  const leaveToHome = useLeaveToHome();
+  const onClick = useCallback(() => leaveToHome?.(), [leaveToHome]);
 
+  if (leaveToHome === null)
     return (
-    <Link
+      <div className={classNames(styles.headerLogo, className)}>
+        <Logo />
+      </div>
+    );
+  return (
+    <button
+      type="button"
       className={classNames(styles.headerLogo, className)}
-      to="/"
+      onClick={onClick}
       aria-label={t("header_label")}
     >
       <Logo />
-    </Link>
+    </button>
   );
 };
 

src/LeaveToHomeContext.ts

@@ -0,0 +1,29 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { createContext, use } from "react";
+
+/**
+ * How the user leaves the call for wherever they came from: the standalone
+ * app's home page, with its list of recent calls.
+ *
+ * The call itself has no idea where that is, or whether there is such a place
+ * at all. Standalone there is, and the shell navigates to it; as a component
+ * there is not — the host decides what happens after a call — so nothing is
+ * supplied, and the call offers no way out of its own. This is what lets the
+ * call be rendered without a router.
+ */
+const LeaveToHomeContext = createContext<(() => void) | null>(null);
+
+export const LeaveToHomeProvider = LeaveToHomeContext.Provider;
+
+/**
+ * The way out of the call, or null when there is nowhere to go and the call
+ * should not offer one.
+ */
+export const useLeaveToHome = (): (() => void) | null =>
+  use(LeaveToHomeContext);

src/button/LeaveToHomeLink.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, type MouseEvent, type ReactNode, useCallback } from "react";
+import { Link } from "@vector-im/compound-web";
+
+import { useLeaveToHome } from "../LeaveToHomeContext";
+
+interface Props {
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * A link out of the call, to wherever the user came from. Renders nothing when
+ * there is nowhere to go (see {@link useLeaveToHome}).
+ */
+export const LeaveToHomeLink: FC<Props> = ({ className, children }) => {
+  const leaveToHome = useLeaveToHome();
+  const onClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+      leaveToHome?.();
+    },
+    [leaveToHome],
+  );
+
+  if (leaveToHome === null) return null;
+  // Where this leads is the shell's business, so the link has no address of
+  // its own to offer
+  return (
+    <Link className={className} href="#" onClick={onClick}>
+      {children}
+    </Link>
+  );
+};

src/room/CallEndedView.tsx

@@ -9,8 +9,6 @@ import { type FC, type FormEventHandler, useCallback, useState } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { Trans, useTranslation } from "react-i18next";
 import { Button, Heading, Text } from "@vector-im/compound-web";
-import { useNavigate } from "react-router-dom";
-import { logger } from "matrix-js-sdk/lib/logger";
 
 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
@@ -19,8 +17,9 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { FieldRow, InputField } from "../input/Input";
 import { StarRatingInput } from "../input/StarRatingInput";
-import { Link } from "../button/Link";
 import { LinkButton } from "../button";
+import { LeaveToHomeLink } from "../button/LeaveToHomeLink";
+import { useLeaveToHome } from "../LeaveToHomeContext";
 
 interface Props {
   client: MatrixClient;
@@ -38,7 +37,7 @@ export const CallEndedView: FC<Props> = ({
   endedCallId,
 }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const leaveToHome = useLeaveToHome();
 
   const { displayName } = useProfile(client);
   const [surveySubmitted, setSurveySubmitted] = useState(false);
@@ -68,14 +67,12 @@ export const CallEndedView: FC<Props> = ({
             setSurveySubmitted(true);
           } else if (!confineToRoom) {
             // if the user already has an account immediately go back to the home screen
-            navigate("/")?.catch((error) => {
+            leaveToHome?.();
-              logger.error("Failed to navigate to /", error);
-            });
           }
         }, 1000);
       }, 1000);
     },
-    [endedCallId, navigate, isPasswordlessUser, confineToRoom, starRating],
+    [endedCallId, leaveToHome, isPasswordlessUser, confineToRoom, starRating],
   );
 
   const createAccountDialog = isPasswordlessUser && (
@@ -87,6 +84,8 @@ export const CallEndedView: FC<Props> = ({
           calls
         </p>
       </Trans>
+      {/* Only guests of the standalone app are ever passwordless, so this
+      route is always the standalone app's own. */}
       <LinkButton className={styles.callEndedButton} to="/register">
         {t("call_ended_view.create_account_button")}
       </LinkButton>
@@ -157,7 +156,10 @@ export const CallEndedView: FC<Props> = ({
         </main>
         {!confineToRoom && (
           <Text className={styles.footer}>
-            <Link to="/"> {t("call_ended_view.not_now_button")} </Link>
+            <LeaveToHomeLink>
+              {" "}
+              {t("call_ended_view.not_now_button")}{" "}
+            </LeaveToHomeLink>
           </Text>
         )}
       </div>

src/room/CallView.tsx

@@ -28,7 +28,6 @@ import {
   MatrixRTCSessionEvent,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { useNavigate } from "react-router-dom";
 
 import { type JoinCallData } from "../widget";
 import { LobbyView } from "./LobbyView";
@@ -72,6 +71,7 @@ import { useBehavior } from "../useBehavior.ts";
 import { useRootElement } from "../RootElementContext.ts";
 import { useHostBridge } from "../HostBridge.ts";
 import { useMuteStates } from "../state/useMuteStates.ts";
+import { useLeaveToHome } from "../LeaveToHomeContext.ts";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -374,7 +374,7 @@ const LoadedCallView: FC<LoadedProps> = ({
   // TODO refactor this + "joined" to just one callState
   const [left, setLeft] = useState(false);
 
-  const navigate = useNavigate();
+  const leaveToHome = useLeaveToHome();
 
   // TODO split this into leave and onDisconnect
   const onLeft = useCallback(
@@ -433,7 +433,7 @@ const LoadedCallView: FC<LoadedProps> = ({
             !confineToRoom &&
             !PosthogAnalytics.instance.isEnabled()
           )
-            void navigate("/");
+            leaveToHome?.();
 
           // After this point the host could dispose of us at any moment!
           try {
@@ -462,7 +462,7 @@ const LoadedCallView: FC<LoadedProps> = ({
       isPasswordlessUser,
       confineToRoom,
       returnToLobby,
-      navigate,
+      leaveToHome,
     ],
   );
 

src/room/GroupCallErrorBoundary.test.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test, vi } from "vitest";
+import { describe, expect, onTestFinished, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import {
   type FC,
@@ -14,7 +14,7 @@ import {
   useCallback,
   useState,
 } from "react";
-import { BrowserRouter } from "react-router-dom";
+import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import userEvent from "@testing-library/user-event";
 import { ConnectionError } from "livekit-client";
 import { MatrixError } from "matrix-js-sdk";
@@ -42,6 +42,9 @@ import {
   nullHostBridge,
 } from "../HostBridge.ts";
 
+// Somewhere to go home to, so that the error pages offer the way
+const leaveToHome = vi.fn();
+
 test.each([
   {
     error: new MatrixRTCTransportMissingError("example.com"),
@@ -79,14 +82,14 @@ test.each([
 
     const onErrorMock = vi.fn();
     const { asFragment } = render(
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary
           onError={onErrorMock}
           recoveryActionHandler={vi.fn()}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
-      </BrowserRouter>,
+      </LeaveToHomeProvider>,
     );
 
     await screen.findByText(expectedTitle);
@@ -106,15 +109,19 @@ test("should render the error page with link back to home", async () => {
   };
 
   const onErrorMock = vi.fn();
+  // From the home page itself the home button reloads instead of navigating,
+  // so be somewhere else for this test
+  window.history.pushState({}, "", "/room/somewhere");
+  onTestFinished(() => window.history.pushState({}, "", "/"));
   const { asFragment } = render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <GroupCallErrorBoundary
         onError={onErrorMock}
         recoveryActionHandler={vi.fn()}
       >
         <TestComponent />
       </GroupCallErrorBoundary>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Call is not supported");
@@ -123,7 +130,11 @@ test("should render the error page with link back to home", async () => {
     screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i),
   ).toBeInTheDocument();
 
-  await screen.findByRole("button", { name: "Return to home screen" });
+  // The way home is whatever the shell supplied, not a route of the call's own
+  await userEvent
+    .setup()
+    .click(screen.getByRole("button", { name: "Return to home screen" }));
+  expect(leaveToHome).toHaveBeenCalledOnce();
 
   expect(onErrorMock).toHaveBeenCalledOnce();
   expect(onErrorMock).toHaveBeenCalledWith(error);
@@ -155,11 +166,11 @@ test("ConnectionLostError: Action handling should reset error state", async () =
     );
 
     return (
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary recoveryActionHandler={reconnectCallback}>
           <TestComponent fail={failState} />
         </GroupCallErrorBoundary>
-      </BrowserRouter>
+      </LeaveToHomeProvider>
     );
   };
 
@@ -194,14 +205,14 @@ describe("Rageshake button", () => {
     };
 
     render(
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
-      </BrowserRouter>,
+      </LeaveToHomeProvider>,
     );
   }
 
@@ -234,7 +245,7 @@ test("should have a close button when the host can dismiss us", async () => {
   const user = userEvent.setup();
   const onErrorMock = vi.fn();
   const { asFragment } = render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <HostBridgeProvider value={hostBridge}>
         <GroupCallErrorBoundary
           onError={onErrorMock}
@@ -243,7 +254,7 @@ test("should have a close button when the host can dismiss us", async () => {
           <TestComponent />
         </GroupCallErrorBoundary>
       </HostBridgeProvider>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Call is not supported");
@@ -273,11 +284,11 @@ test("should show technical details when error has a matrixError cause", async (
   };
 
   render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
         <TestComponent />
       </GroupCallErrorBoundary>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Something went wrong");
@@ -302,11 +313,11 @@ test("should not show technical details when error has no matrix error cause", a
   };
 
   render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
         <TestComponent />
       </GroupCallErrorBoundary>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Connection lost");
@@ -356,14 +367,14 @@ describe("LiveKit ConnectionError variants", () => {
       };
 
       const { asFragment } = render(
-        <BrowserRouter>
+        <LeaveToHomeProvider value={leaveToHome}>
           <GroupCallErrorBoundary
             onError={vi.fn()}
             recoveryActionHandler={vi.fn()}
           >
             <TestComponent />
           </GroupCallErrorBoundary>
-        </BrowserRouter>,
+        </LeaveToHomeProvider>,
       );
 
       // Check title
@@ -385,14 +396,14 @@ describe("LiveKit ConnectionError variants", () => {
     };
 
     const { asFragment } = render(
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
-      </BrowserRouter>,
+      </LeaveToHomeProvider>,
     );
 
     await screen.findByText("Connection timeout");

src/room/LobbyView.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
+import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
 import { axe } from "vitest-axe";
@@ -26,6 +26,9 @@ import lobbyStyles from "./LobbyView.module.css";
 import headerStyles from "../Header.module.css";
 import { AppBar } from "../AppBar";
 
+// Somewhere to go home to, so that the lobby offers the way back
+const leaveToHome = vi.fn();
+
 vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
@@ -93,14 +96,14 @@ function renderLobbyView(
     />
   );
   return render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <MediaDevicesContext value={mediaDevices}>
         <TooltipProvider>
           {withAppBar && <AppBar>{lobbyView}</AppBar>}
           {!withAppBar && lobbyView}
         </TooltipProvider>
       </MediaDevicesContext>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 }
 

src/room/LobbyView.tsx

@@ -25,7 +25,6 @@ import {
   Track,
 } from "livekit-client";
 import { useObservableEagerState } from "observable-hooks";
-import { useNavigate } from "react-router-dom";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -36,7 +35,8 @@ import { InviteButton } from "../button/InviteButton";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRootSizeMatches } from "../useRootSize";
 import { E2eeType } from "../e2ee/e2eeType";
-import { Link } from "../button/Link";
+import { LeaveToHomeLink } from "../button/LeaveToHomeLink";
+import { useLeaveToHome } from "../LeaveToHomeContext";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { ObservableScope } from "../state/ObservableScope";
 import { useInitial } from "../useInitial";
@@ -109,21 +109,19 @@ export const LobbyView: FC<Props> = ({
     [setSettingsModalOpen],
   );
 
-  const navigate = useNavigate();
+  // Leaving the lobby means going back to wherever the user came from, if
-  const onLeaveClick = useCallback(() => {
+  // there is such a place
-    navigate("/")?.catch((error) => {
+  const leaveToHome = useLeaveToHome();
-      logger.error("Failed to navigate to /", error);
+  const hangup =
-    });
+    confineToRoom || leaveToHome === null ? undefined : leaveToHome;
-  }, [navigate]);
-  const hangup = confineToRoom ? undefined : onLeaveClick;
 
   const recentsButtonInFooter = useRootSizeMatches(
     ({ height }) => height <= 500,
   );
   const recentsButton = !confineToRoom && (
-    <Link className={styles.recents} to="/">
+    <LeaveToHomeLink className={styles.recents}>
       {t("lobby.leave_button")}
-    </Link>
+    </LeaveToHomeLink>
   );
 
   const devices = useMediaDevices();
@@ -209,7 +207,7 @@ export const LobbyView: FC<Props> = ({
     return (): void => {
       footerScope.end();
     };
-  }, [devices, hangup, hideHeader, muteStates, onLeaveClick, openSettings]);
+  }, [devices, hangup, hideHeader, muteStates, openSettings]);
 
   // TODO: Unify this component with InCallView, so we can get slick joining
   // animations and don't have to feel bad about reusing its CSS

src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap

@@ -11,11 +11,10 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -92,7 +91,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -169,11 +168,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -250,7 +248,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -326,11 +324,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -407,7 +404,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -483,11 +480,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -564,7 +560,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -640,11 +636,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -721,7 +716,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -797,11 +792,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -878,7 +872,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -954,11 +948,10 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1035,7 +1028,7 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1111,11 +1104,10 @@ exports[`should have a close button when the host can dismiss us 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1192,7 +1184,7 @@ exports[`should have a close button when the host can dismiss us 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1265,11 +1257,10 @@ exports[`should render the error page with link back to home 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1346,7 +1337,7 @@ exports[`should render the error page with link back to home 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1419,11 +1410,10 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1500,7 +1490,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1573,11 +1563,10 @@ exports[`should report correct error for 'Connection lost' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1654,7 +1643,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1731,11 +1720,10 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1812,7 +1800,7 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1885,11 +1873,10 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -1966,7 +1953,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -2034,11 +2021,10 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
+          type="button"
-          href="/"
         >
           <svg
             fill="none"
@@ -2115,7 +2101,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"

src/room/__snapshots__/LobbyView.test.tsx.snap

@@ -88,7 +88,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
-        href="/"
+        href="#"
         rel="noreferrer noopener"
       >
         Back to recents
@@ -320,7 +320,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
-        href="/"
+        href="#"
         rel="noreferrer noopener"
       >
         Back to recents
@@ -598,7 +598,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
-        href="/"
+        href="#"
         rel="noreferrer noopener"
       >
         Back to recents