Dynamic route parameters in Remix - Mini Project: Build & Apply

Dynamic Route Parameters in Remix

📖 Scenario: You are building a simple blog website using Remix. Each blog post has a unique ID. You want to create a page that shows the details of a blog post based on the ID in the URL.

🎯 Goal: Build a Remix route that uses a dynamic parameter to display the blog post ID from the URL.

📋 What You'll Learn

Create a dynamic route file named $postId.jsx inside the routes folder.

Extract the dynamic parameter postId from the URL using Remix's useParams hook.

Display the postId inside an <h1> element.

Export a default functional component that renders the post ID.

💡 Why This Matters

🌍 Real World

Dynamic routes let websites show different content based on URL parts, like user profiles or blog posts.

💼 Career

Understanding dynamic routing is essential for building modern web apps with Remix or similar frameworks.

1

Create the dynamic route file

Create a new file named $postId.jsx inside the routes folder. Inside it, write a React functional component named Post that returns an empty fragment <></>.

Remix

// Create a file named $postId.jsx in routes folder
export default function Post() {
  return ;
  // Your code here
}

Hint

Dynamic route files in Remix start with a dollar sign $. The component must be the default export.

2

Import useParams hook

At the top of $postId.jsx, import the useParams hook from @remix-run/react.

Remix

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

export default function Post() {
  return ;
  // Your code here
}

Hint

Use curly braces to import useParams from @remix-run/react.

3

Extract the postId parameter

Inside the Post component, call useParams() and extract the postId parameter using object destructuring.

Remix

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

export default function Post() {
  const { postId } = useParams();
  // Your code here
  return ;
}

Hint

Call useParams() and use curly braces to get postId.

4

Display the postId in the component

Replace the empty fragment in the Post component's return statement with an <h1> element that shows the text Post ID: followed by the postId value.

Remix

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

export default function Post() {
  const { postId } = useParams();
  return Post ID: {postId};
  // Your code here
}

Hint

Use curly braces inside JSX to insert the postId variable.