---
url: https://docs.tailor.tech/app-shell/api/create-typed-paths.md
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) for setup.

## Related

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