Overview

Catch-all routes match multiple URL segments in one route using [...name]. The param becomes an array. The optional version [[...name]] also matches the parent path. Each creates a URL.

What are Catch-All Routes?

Catch-all routes match any number of segments after the parent path using [...name]. The param is an array of matched segments. Lower priority than static and single dynamic routes.

/docs/getting-started matches with slug = ['getting-started'], /docs/guides/routing/basics with slug = ['guides', 'routing', 'basics'].

Basic Usage

Create a catch-all by naming a folder or file [...name]. Requires at least one segment. Creates a URL for any depth.

Accessing Parameters

Use useParams() (auto-imported). The param is an array.

export default function DocsPage() {
  const { slug } = useParams()
  // slug is array of URL segments

  return (
    <div>
      <h1>Documentation</h1>
      <p>Path: {slug?.join(' / ')}</p>
      <p>Depth: {slug?.length || 0}</p>
    </div>
  )
}

export default function BlogArchive() {
  const { slug } = useParams()
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const path = slug?.join('/')
    fetchPosts(path).then(setPosts)
  }, [slug])

  return (
    <div>
      <h1>Archive: {slug?.join(' / ') || 'Home'}</h1>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

Nested Catch-All Routes

Combine catch-all with static and dynamic segments. Each combination creates a URL.

export default function ProductPage() {
  const { category, slug } = useParams()

  return (
    <div>
      <h1>Category: {category}</h1>
      <p>Path: {slug?.join(' / ')}</p>
      <p>Segments: {slug?.length || 0}</p>
    </div>
  )
}

Optional Catch-All Routes

[[...name]] makes the catch-all optional - it matches the parent and nested paths. Creates a URL for both.

export default function ShopPage() {
  const { slug } = useParams()

  if (!slug || slug.length === 0) {
    return <h1>Shop Home</h1>
  }

  return (
    <div>
      <h1>Category: {slug.join(' / ')}</h1>
      <p>Depth: {slug.length}</p>
    </div>
  )
}

File-Based Catch-All Routes

Catch-all as flat files without folders. Creates a URL directly and reduces nesting.

export default function BlogArchive() {
  const { slug } = useParams()
  return <h1>Archive: {slug?.join(' / ')}</h1>
}

Route Priority

Catch-all has lower priority than static and single dynamic routes. All create URLs, but static wins.

Use Cases

Catch-all routes are ideal for multi-segment structures. All create URLs.

Complete Example

Catch-all only - [...param] and [[...param]] patterns that create URLs.