Dynamic routes and loader functions in Remix

With the changes we have made in the previous lesson, we have a news category page set up, but the content is always the same:

When we click each link, the URL changes in the browser’s address bar, but the content in the window remains the same.

Why?

Route params

The $ sign in the file name news/$category.tsx is actually a special character that tells Remix that this route is dynamic.

It means that the route can match any base URL that starts with /news/, but then will have a unique value for category.

So, for example, if we visited the URL:

http://localhost:3000/news/business

…the $category value would be the string “business”.

However, if we visited

http://localhost:3000/news/reviews

…the $category value would then be the string “reviews”, and so on.

Reading route params with the loader function

To read the category value from the URL, we need to add something called a loader function to our news/$category.tsx file.

Info

What is a loader function?

Code placed inside a Remix loader function is executed on the server.

There are two rules to remember when creating a loader function:

1. The loader function needs to be placed inside a route file (i.e. a tsx file inside the routes folder)

2. It should prefixed with the export keyword so that Remix can access it.

   export async function loader({ params }: LoaderFunctionArgs) {
     // Server-side code here...
   }

You can learn more about loader functions below:

More info is available in the Remix docs.

At first, let’s just log the category value out to the console and see what it looks like.

Carefully add the following code to your news/$category.tsx file:

app/routes/news.$category.tsx

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

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

  console.log({ category })

  return json({})
}

export default function NewsCategoryPage() {
  return (
    <div className="container py-16">
      <h2 className="text-h2">Generic news category page</h2>
    </div>
  )
}

Important

You’ll notice the loader function is being passed a params object as an argument here:

export async function loader({ params }: LoaderFunctionArgs) {
  // ... more code here...
}

This params object contains all the route parameters for the current route.

In our case, we are destructuring the category value from the params object like this:

const { category } = params

Head back to your browser and click the links between the different news categories.

Now check your VS Code terminal. You should see the category value logged out each time you click a link:

This is great!

We are loading the dynamic category value directly from the URL and logging it to the console.

In the next step, we will do something more useful with this value. We will pass it to our NewsCategoryPage component and display it on the page.

Summary

In this step, we have:

• Deleted our hard-coded static child routes and replaced them with a single dynamic route.
• Learned about route params and how they can be used to create dynamic routes in Remix.
• Added a loader function to our dynamic route to read the category value from the URL.
• Logged the category value to the console to see what it looks like.

What’s next?

In the next step, we will pass the category value to our NewsCategoryPage component with Remix’s useLoaderData hook, and display it on the page.