Dynamic route parameters in Remix

Introduction

Dynamic route parameters let your app show different pages based on parts of the URL. This helps create pages for many items without making a file for each one.

Showing a user profile page based on the user ID in the URL.

Displaying a blog post page using the post's unique slug from the URL.

Creating product detail pages where the product ID changes in the URL.

Building category pages where the category name is part of the URL.

Syntax

Remix

app/routes/$paramName.tsx

The $paramName part in the filename tells Remix this is a dynamic segment.

You can access the parameter inside your component using the useParams() hook.

Examples

This example shows a dynamic route for user profiles. The URL /123 will show User ID: 123.

Remix

app/routes/$userId.tsx

import { useParams } from '@remix-run/react';

export default function UserProfile() {
  const params = useParams();
  return <div>User ID: {params.userId}</div>;
}

This example uses a dynamic slug for blog posts. The URL /blog/my-first-post will show Blog post: my-first-post.

Remix

app/routes/blog/$slug.tsx

import { useParams } from '@remix-run/react';

export default function BlogPost() {
  const { slug } = useParams();
  return <h1>Blog post: {slug}</h1>;
}

Sample Program

This component shows product details based on the product ID from the URL. For example, visiting /42 will display the product ID 42.

Remix

app/routes/$productId.tsx

import { useParams } from '@remix-run/react';

export default function ProductPage() {
  const { productId } = useParams();
  return (
    <main>
      <h1>Product Details</h1>
      <p>Product ID: {productId}</p>
    </main>
  );
}

Important Notes

Dynamic route files must start with $ to tell Remix they are dynamic.

You can have multiple dynamic parameters by nesting folders or using multiple $param files.

Remember to use useParams() inside your component to get the current URL values.

Summary

Dynamic route parameters let you create flexible pages that change based on the URL.

Use $paramName in filenames and useParams() in components to access them.

This helps build apps with many similar pages without making many files.