How to Use Params in Remix Route: Simple Guide

In Remix, you define route parameters by adding a dollar sign before the param name in the route file name, like $param. You access these params inside your loader or component using useParams() or from the loader's params argument.

Syntax

In Remix, route parameters are defined by naming the route file with a dollar sign prefix. For example, routes/users/$userId.jsx defines a userId param. You can access this param in your loader function via the params object or inside your component using the useParams() hook.

• Route file: $paramName defines a param.
• Loader function: receives params object with param values.
• Component: use useParams() to get params.

jsx

export async function loader({ params }) {
  // Access param by name
  const userId = params.userId;
  return { userId };
}

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

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

Example

This example shows a route file named routes/products/$productId.jsx. It uses a loader to get the productId param and displays it in the component.

jsx

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

export async function loader({ params }) {
  // Simulate fetching product data using productId
  const productId = params.productId;
  return { productId, name: `Product ${productId}` };
}

export default function Product() {
  const data = useLoaderData();
  return (
    <main>
      <h1>Product Details</h1>
      <p>Product ID: {data.productId}</p>
      <p>Product Name: {data.name}</p>
    </main>
  );
}

Output

<main>
  <h1>Product Details</h1>
  <p>Product ID: 123</p>
  <p>Product Name: Product 123</p>
</main>

Common Pitfalls

• Forgetting to prefix the param name with $ in the route file name means Remix won't treat it as a param.
• Trying to access params directly in the component without using useParams() or passing loader data.
• Not handling the case when params are undefined or missing, which can cause errors.

Always check that your route file is named correctly and access params properly.

jsx

/* Wrong: route file named 'routes/userId.jsx' (missing $) */
// Remix won't treat 'userId' as a param

/* Right: route file named 'routes/$userId.jsx' */

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

export default function User() {
  const params = useParams();
  if (!params.userId) {
    return <p>No user ID found</p>;
  }
  return <p>User ID: {params.userId}</p>;
}

Quick Reference

Remember these key points when using params in Remix routes:

• Route file name: use $paramName to define params.
• Loader function: access params via params.paramName.
• Component: use useParams() hook to get params.
• Always handle missing or undefined params gracefully.

Key Takeaways

Define route params by prefixing the file name with a dollar sign, like $paramName.

Access params in loader functions via the params argument.

Use the useParams() hook inside components to read route params.

Always check for undefined params to avoid runtime errors.

Incorrect route file naming is the most common cause of params not working.