The Difference Between params and props in Astro and How to Use Them#

1. URL Dependency-Based Selection#

Use params when URL structure is the primary source of data:

// src/pages/articles/[category]/[id].astro
---
const { category, id } = Astro.params;
// Use values obtained directly from URL for data fetching
const article = await fetchArticle(category, id);
---

Key Point: Effective when URLs represent user state or navigation history.

2. Maximizing Component Reusability#

Always use props for reusable components:

---
// src/components/Alert.astro
interface Props {
  type: 'info' | 'warning' | 'error';
  message: string;
  dismissable?: boolean;
}

const { type, message, dismissable = true } = Astro.props;
---

<div class={`alert alert-${type}`} data-dismissable={dismissable}>
  <p>{message}</p>
  {dismissable && <button class="close">×</button>}
</div>

Practical Examples:

<Alert type="warning" message="You have unsaved changes" />
<Alert type="error" message="Connection failed" dismissable={false} />

3. Data Fetching and 404 Handling#

Consider handling cases where params values are invalid:

---
// src/pages/products/[id].astro
const { id } = Astro.params;
const product = await getProduct(id);

// Redirect to 404 page if product doesn't exist
if (!product) {
  return Astro.redirect('/404');
}

// Or change only the Status Code
if (!product) {
  Astro.response.status = 404;
}
---

{product ? (
  <ProductDetail item={product} />
) : (
  <ProductNotFound id={id} />
)}

4. Maximizing TypeScript Compatibility#

Use type definitions for type-safe codebases:

// Type definition for params
export interface ProductParams {
  id: string;
  category?: string;
}

// Common type definition for props (reusable)
export interface CardProps {
  title: string;
  description: string;
  imageUrl?: string;
  isPromoted?: boolean;
}

Dynamic Blog Article Page Example#

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';
import RelatedPosts from '../../components/RelatedPosts.astro';
import ShareButtons from '../../components/ShareButtons.astro';

// 1. Get slug from params
const { slug } = Astro.params;

// 2. Get content
const posts = await getCollection('blog');
const post = posts.find(post => post.slug === slug);

// 3. 404 if article doesn't exist
if (!post) {
  return Astro.redirect('/404');
}

// 4. Get related posts (articles with same tags)
const relatedPosts = posts
  .filter(p => p.slug !== slug && p.data.tags.some(tag => post.data.tags.includes(tag)))
  .slice(0, 3);

// 5. Prepare to render article content
const { Content } = await post.render();
---

<BlogLayout title={post.data.title} description={post.data.description}>
  <article class="prose lg:prose-xl mx-auto">
    <h1>{post.data.title}</h1>
    
    <div class="metadata">
      <time datetime={post.data.date.toISOString()}>
        {post.data.date.toLocaleDateString('en-US')}
      </time>
      <div class="tags">
        {post.data.tags.map(tag => (
          <a href={`/tags/${tag}`} class="tag">#{tag}</a>
        ))}
      </div>
    </div>
    
    <Content />
    
    <!-- Pass necessary data to components via props -->
    <ShareButtons 
      title={post.data.title} 
      url={`https://myblog.com/blog/${slug}`} 
    />
    
    <RelatedPosts posts={relatedPosts} />
  </article>
</BlogLayout>

Reusable UI Component Example#

---
// src/components/PostCard.astro
interface Props {
  title: string;
  date: Date;
  excerpt: string;
  slug: string;
  featured?: boolean;
}

const { title, date, excerpt, slug, featured = false } = Astro.props;
const formattedDate = date.toLocaleDateString('en-US');
---

<article class={`card ${featured ? 'card-featured' : ''}`}>
  <a href={`/blog/${slug}`}>
    <h2>{title}</h2>
    <p class="excerpt">{excerpt}</p>
    <time datetime={date.toISOString()}>{formattedDate}</time>
  </a>
</article>

<style>
  .card {
    border: 1px solid #eee;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .card-featured {
    border-left: 4px solid #7c3aed;
    background-color: #f5f3ff;
  }
</style>

Mistake 1: Trying to access params from client components#

---
// ❌ This doesn't work
---
<script>
  // Astro.params is not available on the client side
  console.log(Astro.params.slug);  // Error!
</script>

Solution: Pass necessary values through data attributes

---
const { slug } = Astro.params;
---
<div data-article-id={slug}>
  <script>
    // Access via data attributes
    const container = document.querySelector('[data-article-id]');
    const slug = container.dataset.articleId;
    console.log('Article slug:', slug);
  </script>
</div>

Mistake 2: Omitting props typing#

---
// ❌ No types, can't prevent incorrect usage
const { titl } = Astro.props; // Typos won't be warned about
---

Solution: Always define Props interface

---
// ✅ Type-safe props handling
interface Props {
  title: string;
  description?: string;
}

const { title, description = '' } = Astro.props;
---