Link to single article page

Now that we have our single article page built, we need a way to link to it from the individual news cards that we display on the news index page.

Link to the single article page

For every card on a news index page (e.g. the home page or /news/$category), we want to link to the single article page when the user clicks on the card.

You should use the Link component from '@remix-run/react' to create a link to the single article page.
The link should incorporate the article ID into its URL (use a template literal string for this).
Can you set the link to prefetch the page data when the user hovers over it?

When you are ready, check out one possible solution below and compare it with your own.

Solution

1. Capture article ID

You will now need to pass the article ID to the ArticleCard wherever this component is being called.

We will use the /news/$category route in this example, but if you are also displaying news articles on the home page, you will need to update the code there as well.

Open app/routes/news.$category.tsx
Add the articleId prop to the ArticleCard component:


29 collapsed lines
1
import { invariant } from '@epic-web/invariant'
2
import { type LoaderFunctionArgs, json } from '@remix-run/node'
3
import { useLoaderData } from '@remix-run/react'
4
import ArticleCard from '~/components/organisms/ArticleCard.tsx'
5
import { prisma } from '~/utils/db.server.ts'
6
import { toTitleCase } from '~/utils/stringUtils.ts'
7

8
export async function loader({ params }: LoaderFunctionArgs) {
9
  const { category } = params
10

11
  invariant(typeof category === 'string', 'Category not found')
12
  const categoryTitle = toTitleCase(category)
13

14
  const filteredArticles = await prisma.article.findMany({
15
    where: {
16
      category: {
17
        slug: category, // Retrieves only articles in the specified category
18
      },
19
    },
20
    select: {
21
      id: true,
22
      title: true,
23
      category: { select: { name: true } },
24
      images: { select: { id: true } },
25
    },
26
  })
27

28
  return json({ categoryTitle, filteredArticles })
29
}
30

31
export default function NewsCategoryPage() {
32
  const { categoryTitle, filteredArticles } = useLoaderData<typeof loader>()
33

34
  return (
35
    <div className="container py-16">
36
      <h2 className="mb-8 text-h2">{categoryTitle}</h2>
37

38
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
39
        {filteredArticles.map(article => (
40
          <ArticleCard
41
            key={article.id}
42
            articleId={article.id}
43
            title={article.title}
44
            category={article.category?.name}
45
            imageId={article.images[0]?.id}
46
          />
47
        ))}
48
      </div>
49
    </div>
50
  )
51
}

1. Capture article ID

Open app/components/organisms/ArticleCard.tsx
Add the Link component to the import list at the top of your file:

import { Link } from '@remix-run/react'
import {
  MdOutlineBusinessCenter,
  MdOutlineTheaters,
  MdOutlineDesktopMac,
  MdOutlineNewspaper,
} from 'react-icons/md'
import siteLogo from '~/assets/svg/site-logo.svg'
import { getArticleImgSrc } from '~/utils/misc.tsx'

Add the articleId prop to the ArticleCard component:


9 collapsed lines
1
import { Link } from '@remix-run/react'
2
import {
3
  MdOutlineBusinessCenter,
4
  MdOutlineTheaters,
5
  MdOutlineDesktopMac,
6
  MdOutlineNewspaper,
7
} from 'react-icons/md'
8
import siteLogo from '~/assets/svg/site-logo.svg'
9
import { getArticleImgSrc } from '~/utils/misc.tsx'
10

11
interface ArticleCardProps {
12
  articleId: string
13
  title: string
14
  category?: string
15
  imageId?: string
16
}
17

18
export default function ArticleCard({
19
  articleId,
20
  title,
21
  category = 'General news',
22
  imageId,
23
}: ArticleCardProps) {
30 collapsed lines
24
  const imageSrc = imageId ? getArticleImgSrc(imageId) : siteLogo
25

26
  const categoryIcons: { [key: string]: JSX.Element } = {
27
    Business: <MdOutlineBusinessCenter size={20} className="text-violet-300" />,
28
    Entertainment: <MdOutlineTheaters size={20} className="text-violet-300" />,
29
    Technology: <MdOutlineDesktopMac size={20} className="text-violet-300" />,
30
    'General news': (
31
      <MdOutlineNewspaper size={20} className="text-violet-300" />
32
    ),
33
  }
34

35
  return (
36
    <div className="cursor-pointer transition-all duration-500 hover:scale-105">
37
      <div>
38
        <img
39
          src={imageSrc}
40
          alt={title}
41
          className="h-64 w-full rounded-t object-cover"
42
        />
43
      </div>
44
      <div className="flex h-64 flex-col justify-between rounded-b bg-violet-950 p-4">
45
        <h3 className="line-clamp-3 text-xl font-bold">{title}</h3>
46

47
        <div className="flex items-center gap-2">
48
          {categoryIcons[category]}
49
          <p className="text-sm text-violet-300">{category}</p>
50
        </div>
51
      </div>
52
    </div>
53
  )
54
}

Wrap the div element in the ArticleCard component with the Link component.

We can use a template literal string to incorporate the articleId prop into the URL:


16 collapsed lines
1
import { Link } from '@remix-run/react'
2
import {
3
  MdOutlineBusinessCenter,
4
  MdOutlineTheaters,
5
  MdOutlineDesktopMac,
6
  MdOutlineNewspaper,
7
} from 'react-icons/md'
8
import siteLogo from '~/assets/svg/site-logo.svg'
9
import { getArticleImgSrc } from '~/utils/misc.tsx'
10

11
interface ArticleCardProps {
12
  articleId: string
13
  title: string
14
  category?: string
15
  imageId?: string
16
}
17

18
export default function ArticleCard({
19
  articleId,
20
  title,
21
  category = 'General news',
22
  imageId,
23
}: ArticleCardProps) {
10 collapsed lines
24
  const imageSrc = imageId ? getArticleImgSrc(imageId) : siteLogo
25

26
  const categoryIcons: { [key: string]: JSX.Element } = {
27
    Business: <MdOutlineBusinessCenter size={20} className="text-violet-300" />,
28
    Entertainment: <MdOutlineTheaters size={20} className="text-violet-300" />,
29
    Technology: <MdOutlineDesktopMac size={20} className="text-violet-300" />,
30
    'General news': (
31
      <MdOutlineNewspaper size={20} className="text-violet-300" />
32
    ),
33
  }
34

35
  return (
36
    <Link to={`/article/${articleId}`}>
37
      <div className="cursor-pointer transition-all duration-500 hover:scale-105">
38
        <div>
39
          <img
40
            src={imageSrc}
41
            alt={title}
42
            className="h-64 w-full rounded-t object-cover"
43
          />
44
        </div>
45
        <div className="flex h-64 flex-col justify-between rounded-b bg-violet-950 p-4">
46
          <h3 className="line-clamp-3 text-xl font-bold">{title}</h3>
47

48
          <div className="flex items-center gap-2">
49
            {categoryIcons[category]}
50
            <p className="text-sm text-violet-300">{category}</p>
51
          </div>
52
        </div>
53
      </div>
54
    </Link>
55
  )
56
}

Hover your cursor over a link on a news category page, and you should see the link preview in the bottom left corner of your browser screen:

Link preview

Clicking this link will then take you to the single article page.

2. Modify `ArticleCard`

Summary

In this guide, you learned how to:

link to a single article page from the news index page
use the Link component from '@remix-run/react' to create a link to the single article page
incorporate the article ID into the URL using a template literal string
set the link to prefetch the page data when the user hovers over it

You can now navigate to the single article page from the news index page by clicking on a news card.

Next steps

In the next guide, you will fetch and display the article data on the single article page.