add errorElement

Author: kentcdodds

exercises/99.final/01.solution.final/src/routes.tsx

@@ -9,7 +9,10 @@ import { AboutRoute } from './routes/app/marketing/about.tsx'
 import { HomepageRoute } from './routes/app/marketing/homepage.tsx'
 import { MarketingLayout } from './routes/app/marketing/layout.tsx'
 import { NewRecipientRoute } from './routes/app/new-recipient.tsx'
-import { RecipientRoute } from './routes/app/recipient.tsx'
+import {
+	RecipientErrorBoundary,
+	RecipientRoute,
+} from './routes/app/recipient.tsx'
 import { RecipientsRoute } from './routes/app/recipients.tsx'
 import { SignupRoute } from './routes/signup.tsx'
 
@@ -23,7 +26,11 @@ export const router = createBrowserRouter(
 				</Route>
 				<Route path="recipients" element={<RecipientsRoute />} />
 				<Route path="recipients/new" element={<NewRecipientRoute />} />
-				<Route path="recipients/:id" element={<RecipientRoute />} />
+				<Route
+					path="recipients/:id"
+					element={<RecipientRoute />}
+					errorElement={<RecipientErrorBoundary />}
+				/>
 			</Route>
 			<Route path="/signup" element={<SignupRoute />} />
 			<Route path="*" element={<NotFoundRoute />} />

exercises/99.final/01.solution.final/src/routes/app/recipient.tsx

@@ -1,4 +1,4 @@
-import { useParams, Link } from 'react-router'
+import { useParams, Link, useRouteError } from 'react-router'
 import { Button } from '#src/components/button.tsx'
 import { Icon } from '#src/components/icon.tsx'
 import data from '#src/data.json'
@@ -9,21 +9,7 @@ export function RecipientRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) {
-		return (
-			<div className="container mx-auto mt-4 flex flex-col gap-8">
-				<div className="bg-danger-background rounded-sm p-4">
-					<p className="text-danger-foreground">Recipient not found</p>
-				</div>
-				<Link
-					to="/recipients"
-					className="text-link hover:text-link-hover block text-center hover:underline"
-				>
-					Back to recipients
-				</Link>
-			</div>
-		)
-	}
+	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
 
 	return (
 		<div className="flex min-h-0 flex-grow flex-col md:flex-row">
@@ -164,3 +150,25 @@ export function RecipientRoute() {
 		</div>
 	)
 }
+
+export function RecipientErrorBoundary() {
+	const error = useRouteError()
+
+	return (
+		<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+			<div className="bg-danger-background rounded-sm p-4">
+				<p className="text-danger-foreground">
+					{error instanceof Error ? error.message : 'Unknown error'}
+				</p>
+			</div>
+			<Link
+				to="/recipients"
+				className="text-link hover:text-link-hover block text-center hover:underline"
+			>
+				<Icon name="ArrowLeft" className="inline-block">
+					Back to recipients
+				</Icon>
+			</Link>
+		</div>
+	)
+}