Basic 404 not found for Recipe.

src/api/getRecipe.ts

@@ -1,3 +1,4 @@
+import { notFound } from '@tanstack/react-router'
 import { ApiError } from './ApiError'
 import FullRecipeView, { RawFullRecipeView } from './types/FullRecipeView'
 import { toImageView } from './types/ImageView'
@@ -45,6 +46,8 @@ const getRecipe = async (
             viewerCount,
             mainImage: toImageView(rawMainImage)
         }
+    } else if (response.status === 404) {
+        throw notFound()
     } else {
         throw new ApiError(response.status, response.statusText)
     }

src/routes/recipes_/$username.$slug.tsx

@@ -1,4 +1,8 @@
-import { createFileRoute, useLoaderData } from '@tanstack/react-router'
+import {
+    createFileRoute,
+    useLoaderData,
+    useParams
+} from '@tanstack/react-router'
 import getRecipe from '../../api/getRecipe'
 import Recipe from '../../pages/recipe/Recipe'
 
@@ -9,10 +13,20 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
             queryFn: () =>
                 getRecipe(context.auth.token, params.username, params.slug)
         }),
-    component: () => {
+    component() {
         const recipe = useLoaderData({
             from: '/recipes/$username/$slug'
         })
         return <Recipe {...{ recipe }} />
+    },
+    notFoundComponent() {
+        const { username, slug } = useParams({
+            from: '/recipes/$username/$slug'
+        })
+        return (
+            <p>
+                404: Could not find a Recipe for {username}/{slug}
+            </p>
+        )
     }
 })