---
title: createTypedPaths
description: Generate type-safe route paths from file-based routing
---

# createTypedPaths

Generates type-safe route path helpers from file-based routing structure. Only available when using the Vite plugin.

## Signature

```typescript
function createTypedPaths<T extends Record<string, PageEntry>>(pages: T): TypedPaths<T>;
```

## Parameters

### `pages`

- **Type:** `Record<string, PageEntry>`
- **Required:** Yes
- **Description:** Pages object from virtual module (auto-generated by Vite plugin)

## Return Value

Type-safe path builder functions for each route.

## Usage

### Basic Usage

```typescript
import { createTypedPaths } from "@tailor-platform/app-shell";
import pages from "virtual:app-shell-pages";

const paths = createTypedPaths(pages);

// Type-safe navigation
navigate(paths.products.detail({ id: "123" }));
// Result: "/products/123"
```

### With useNavigate

```typescript
import { useNavigate } from "@tailor-platform/app-shell";

function ProductCard({ product }: { product: Product }) {
  const navigate = useNavigate();
  const paths = createTypedPaths(pages);

  const handleClick = () => {
    navigate(paths.products.detail({ id: product.id }));
  };

  return <button onClick={handleClick}>View Details</button>;
}
```

### With Link Component

```typescript
import { Link } from "@tailor-platform/app-shell";

function ProductLink({ id }: { id: string }) {
  const paths = createTypedPaths(pages);

  return (
    <Link to={paths.products.detail({ id })}>
      View Product
    </Link>
  );
}
```

### Nested Routes

```typescript
// File structure:
// pages/
//   orders/
//     page.tsx
//     [id]/
//       page.tsx
//       edit/
//         page.tsx

paths.orders.index(); // "/orders"
paths.orders.detail({ id: "1" }); // "/orders/1"
paths.orders.edit({ id: "1" }); // "/orders/1/edit"
```

## TypeScript Benefits

```typescript
// ✅ Type-safe parameters
paths.products.detail({ id: "123" }); // Valid

// ❌ Type error - missing required param
paths.products.detail(); // Error: Argument required

// ❌ Type error - wrong param name
paths.products.detail({ productId: "123" }); // Error: Unknown key
```

## File-Based Routing Only

This function is only available when using the Vite plugin with file-based routing.

See [File-Based Routing](../concepts/file-based-routing.md) for setup.

## Related

- [File-Based Routing](../concepts/file-based-routing.md) - Setup guide
- [useNavigate](./router/use-navigate.md) - Programmatic navigation
