V2 future stuff

app/root.tsx

@@ -11,6 +11,7 @@ import fontStyle from "@fontsource/plus-jakarta-sans/index.css";
 import Forbidden from "../components/Forbidden.js";
 import globalStyles from "../index.css";
 import {
+  isRouteErrorResponse,
   Links,
   LiveReload,
   Meta,
@@ -18,7 +19,9 @@ import {
   Scripts,
   useCatch,
   useLoaderData,
+  useRouteError,
 } from "@remix-run/react";
+import { type ErrorResponse } from "@remix-run/router";
 import { LinksFunction } from "@remix-run/cloudflare";
 import Login from "../components/Login.js";
 import Navigation from "../components/Navigation.js";
@@ -28,7 +31,28 @@ import theme from "../theme.js";
 import { withEmotionCache } from "@emotion/react";
 
 export function CatchBoundary() {
-  const { status } = useCatch();
+  const error = useRouteError() as ErrorResponse;
+
+  if (!isRouteErrorResponse(error))
+    return getMarkup(
+      { hide: true },
+      <Container maxW="container.lg" pt="8vh" textAlign="left">
+        <Heading size="4xl">???</Heading>
+        <br />
+        <Text fontSize="xl">Something bad happened!</Text>
+        <br />
+        <br />
+        <br />
+        <Text>Details: {error}</Text>
+        <br />
+        <br />
+        <Link color="#646cff" onClick={location.reload}>
+          Refresh
+        </Link>
+      </Container>
+    );
+
+  const { status } = error;
 
   switch (status) {
     case 303:
@@ -98,9 +122,7 @@ export async function loader({
 }
 
 export function meta() {
-  return {
-    title: "Car Crushers",
-  };
+  return [{ title: "Car Crushers" }];
 }
 
 function getMarkup(