fix(routes): render breadcrumb for 404 pages

This patch fixes an issue where the breadcrumbs relying on `match.data` being defined would throw and surface an unhelpful error to users when all we really wanted to do is show a 404 page.
nicholaschiang · Jul 23, 2023 · b300f82 · b300f82
1 parent a130aaf
commit b300f82
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/app/routes/_layout.products.$productId.tsx b/app/routes/_layout.products.$productId.tsx
@@ -24,7 +24,7 @@ import { useData } from 'utils'
 export const handle: Handle = {
   breadcrumb: (match) => (
     <Link to={`/products/${match.params.productId as string}`}>
-      {(match.data as SerializeFrom<typeof loader>).name}
+      {(match.data as SerializeFrom<typeof loader>)?.name ?? '404'}
     </Link>
   ),
 }

diff --git a/app/routes/shows.$showId/route.tsx b/app/routes/shows.$showId/route.tsx
@@ -15,7 +15,7 @@ import { WhereToBuy } from './where-to-buy'
 export const handle: Handle = {
   breadcrumb: (match) => (
     <Link to={`/shows/${match.params.showId as string}`}>
-      {(match.data as SerializeFrom<typeof loader>).name}
+      {(match.data as SerializeFrom<typeof loader>)?.name ?? '404'}
     </Link>
   ),
 }