Create a single article page

In this guide, you’ll learn how to create a single article page in Epic News.

The single article page

Now that we have a news index page, we need a page for users to read the full article. For now, this page will display the article title, first image, author, date, and content.

Create the single article page

Challenge

Code challenge

Remind yourself how we created a dynamic page for the different news categories.

If you remember, we made the route dynamic by using the $category route param that is defined in the filename itself:

In a similar way, we need to create another dynamic route, but this time for single articles. The article will be found by its id field.

With this knowledge, can you create a new dynamic route for the single article page?

Instructions

• The new page should be accessible at the URL /article/$articleId in the broswer.

• The articleId doesn’t need to be a real id from the database at the moment - remember that route params are dynamic and can be anything.

• For the time being, just display a fake page title and the articleId in the page content.

  So, for example, if you visit http://localhost:3000/article/my-fake-article-id, you should see a page with:

  • the title “My amazing news article”
  • the text “Article ID: my-fake-article-id”

After you’ve had a go at this yourself, check out the solution below.

Solution

1. Create a new route file

1. Create a new file in the src/routes directory called article.$articleId.tsx:

1. Create a new route file

2. Adding code

2. To display a fake article and the articleId in the page content, add the following code to the article.$articleId.tsx file:

app/routes/article.$articleId.tsx

import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'

export async function loader({ params }: LoaderFunctionArgs) {
  const { articleId } = params

  return json({ articleId })
}

export default function ArticlePage() {
  const { articleId } = useLoaderData<typeof loader>()

  return (
    <div className="container py-16">
      <h2 className="pb-8 text-h2">My amazing news article</h2>

      <p>Article ID: {articleId}</p>
    </div>
  )
}

With this in place, you should see the fake article title and the articleId in the page content when you navigate to /article/$articleId:

2. Adding code

Summary

In this guide, we have:

• Created a new dynamic page for the single article page.
• Displayed a fake article title and the articleId in the page content.
• Verified that the dynamic route is working.

Assignment

📄 Assignment documentation

We need to update your assignment to document this new feature. 🚀

1. In your assignment documentation, add a new section called “Single article page”.
2. Describe how you created the single article page.
3. Explain how you accessed the articleId route param, and then passed it to the page content via the useLoaderData hook.

Tip

Useful links

• Remix loader functions
• Remix useLoaderData hook

What’s next?

In the next guide, we’ll create links to the new single article page.