Feat: Dynamic Page Route

动态路由页面 + 404 异常捕获

app/root.tsx

@@ -7,13 +7,56 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  isRouteErrorResponse,
+  useRouteError,
 } from "@remix-run/react";
 import Header from "./components/layout/header";
 import Spinner from "./components/common/spinner";
 import Footer from "./components/layout/footer";
+import { siteTitle } from "~/utils";
 
 import "./index.css";
 
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const isRouteError = isRouteErrorResponse(error);
+
+  const [statusCode, message] = (() => {
+    if (isRouteError) {
+      return [error.status, error.statusText];
+    }
+
+    if (error instanceof Error) {
+      return [500, error.message];
+    }
+
+    return [500, "未知异常"];
+  })();
+
+  return (
+    <html lang="zh-cmn-hans">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{siteTitle(statusCode)}</title>
+        <Meta />
+        <Links />
+      </head>
+      <body className="font-mi pt-16 bg-orange-50 text-neutral-600">
+        <Header />
+        <main className="px-2 py-24 max-w-3xl mx-auto">
+          <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">
+            {statusCode}
+          </h1>
+          <p className="text-center opacity-60">{message}</p>
+        </main>
+        <Footer />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
   { rel: "icon", href: "icon.png" },