Appearance

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>;
}
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 for setup.