Basic Recipe page routing.

src/api/getRecipeInfos.ts

@@ -33,7 +33,8 @@ const getRecipeInfos = async (
                     ownerUsername,
                     isPublic,
                     starCount,
-                    mainImage: rawMainImage
+                    mainImage: rawMainImage,
+                    slug
                 }) => ({
                     id,
                     updated: new Date(rawUpdated),
@@ -54,7 +55,8 @@ const getRecipeInfos = async (
                         caption: rawMainImage.caption,
                         owner: rawMainImage.owner,
                         isPublic: rawMainImage.isPublic
-                    }
+                    },
+                    slug
                 })
             )
         }

src/api/types/RecipeInfoView.ts

@@ -9,6 +9,7 @@ export interface RawRecipeInfoView {
     isPublic: boolean
     starCount: number
     mainImage: RawImageView
+    slug: string
 }
 
 interface RecipeInfoView {
@@ -20,6 +21,7 @@ interface RecipeInfoView {
     isPublic: boolean
     starCount: number
     mainImage: ImageView
+    slug: string
 }
 
 export default RecipeInfoView

src/components/recipe-card/RecipeCard.tsx

@@ -1,9 +1,11 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import classes from './recipe-card.module.css'
+import { Link } from '@tanstack/react-router'
 
 export interface RecipeCardProps {
     title: string
     ownerUsername: string
+    slug: string
     mainImageUrl: string
     mainImageAlt?: string
     starCount: number
@@ -13,6 +15,7 @@ export interface RecipeCardProps {
 const RecipeCard = ({
     title,
     ownerUsername,
+    slug,
     mainImageUrl,
     mainImageAlt,
     starCount,
@@ -20,12 +23,20 @@ const RecipeCard = ({
 }: RecipeCardProps) => {
     return (
         <article className={classes.recipeCard}>
+            <Link
+                to="/recipes/$username/$slug"
+                params={{
+                    username: ownerUsername,
+                    slug
+                }}
+            >
                 <img
                     className={classes.recipeImage}
                     src={mainImageUrl}
                     alt={mainImageAlt}
                     title={mainImageAlt}
                 />
+            </Link>
             <div className={classes.infoContainer}>
                 <h1 className={classes.title}>{title}</h1>
                 <span>

src/pages/recipe/Recipe.tsx

@@ -0,0 +1,14 @@
+import { Route } from '../../routes/recipes_/$username.$slug'
+
+export interface RecipeProps {}
+
+const Recipe = ({}: RecipeProps) => {
+    const { username, slug } = Route.useParams()
+    return (
+        <>
+            Hello, {username}/{slug}
+        </>
+    )
+}
+
+export default Recipe

src/pages/recipes/Recipes.tsx

@@ -34,6 +34,7 @@ const Recipes = () => {
                 key={view.id}
                 title={view.title}
                 ownerUsername={view.ownerUsername}
+                slug={view.slug}
                 mainImageUrl={view.mainImage.url}
                 mainImageAlt={
                     view.mainImage.alt ? view.mainImage.alt : undefined

src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as RecipesImport } from './routes/recipes'
 import { Route as LoginImport } from './routes/login'
 import { Route as AuthImport } from './routes/_auth'
 import { Route as AuthIndexImport } from './routes/_auth/index'
+import { Route as RecipesUsernameSlugImport } from './routes/recipes_/$username.$slug'
 
 // Create/Update Routes
 
@@ -38,6 +39,11 @@ const AuthIndexRoute = AuthIndexImport.update({
   getParentRoute: () => AuthRoute,
 } as any)
 
+const RecipesUsernameSlugRoute = RecipesUsernameSlugImport.update({
+  path: '/recipes/$username/$slug',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -70,6 +76,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthIndexImport
       parentRoute: typeof AuthImport
     }
+    '/recipes/$username/$slug': {
+      id: '/recipes/$username/$slug'
+      path: '/recipes/$username/$slug'
+      fullPath: '/recipes/$username/$slug'
+      preLoaderRoute: typeof RecipesUsernameSlugImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -79,6 +92,7 @@ export const routeTree = rootRoute.addChildren({
   AuthRoute: AuthRoute.addChildren({ AuthIndexRoute }),
   LoginRoute,
   RecipesRoute,
+  RecipesUsernameSlugRoute,
 })
 
 /* prettier-ignore-end */
@@ -91,7 +105,8 @@ export const routeTree = rootRoute.addChildren({
       "children": [
         "/_auth",
         "/login",
-        "/recipes"
+        "/recipes",
+        "/recipes/$username/$slug"
       ]
     },
     "/_auth": {
@@ -109,6 +124,9 @@ export const routeTree = rootRoute.addChildren({
     "/_auth/": {
       "filePath": "_auth/index.tsx",
       "parent": "/_auth"
+    },
+    "/recipes/$username/$slug": {
+      "filePath": "recipes_/$username.$slug.tsx"
     }
   }
 }

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

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import Recipe from '../../pages/recipe/Recipe'
+
+export const Route = createFileRoute('/recipes/$username/$slug')({
+    component: Recipe
+})