Add mobile detection to the root route to apply to all navigations

Author: fulopkovacs

src/routes/__root.tsx

@@ -5,6 +5,7 @@ import {
   ClientOnly,
   createRootRouteWithContext,
   HeadContent,
+  redirect,
   ScriptOnce,
   Scripts,
 } from "@tanstack/react-router";
@@ -16,6 +17,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Toaster } from "@/components/ui/sonner";
 import { client, idbName } from "@/db";
+import { getIsMobile } from "@/server/functions/getIsMobile";
 import { seo } from "@/utils/seo";
 import appCss from "../styles.css?url";
 
@@ -24,6 +26,20 @@ interface MyRouterContext {
 }
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({
+  beforeLoad: async ({ location }) => {
+    // Skip redirect if already on /mobile to avoid infinite loop
+    if (location.pathname === "/mobile") {
+      return;
+    }
+
+    const isMobile = await getIsMobile();
+
+    if (isMobile) {
+      throw redirect({
+        to: "/mobile",
+      });
+    }
+  },
   head: () => ({
     meta: [
       {

src/routes/index.tsx

@@ -1,24 +1,7 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { createServerFn } from "@tanstack/react-start";
-import { getRequestHeader } from "@tanstack/react-start/server";
-
-const getIsMobile = createServerFn().handler(async () => {
-  const userAgent = getRequestHeader("user-agent") || "";
-  const mobileRegex =
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
-  return mobileRegex.test(userAgent);
-});
 
 export const Route = createFileRoute("/")({
   beforeLoad: async () => {
-    const isMobile = await getIsMobile();
-
-    if (isMobile) {
-      throw redirect({
-        to: "/mobile",
-      });
-    }
-
     throw redirect({
       to: "/projects",
     });

src/server/functions/getIsMobile.ts

@@ -0,0 +1,9 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeader } from "@tanstack/react-start/server";
+
+export const getIsMobile = createServerFn().handler(async () => {
+  const userAgent = getRequestHeader("user-agent") || "";
+  const mobileRegex =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  return mobileRegex.test(userAgent);
+});