Typed Routes

// app.config.ts
export default {
  experiments: {
    typedRoutes: true,
  },
} satisfies import("expo/config").ExpoConfig;

# Regenerate types after adding routes
npx expo start
# or
npm run typecheck   # tsc --noEmit

import { Link, router, type Href } from "expo-router";
 
// ✅ Static route - string href
const settings: Href = "/settings";
 
// ✅ Dynamic route - object with params
const order: Href = { pathname: "/orders/[id]", params: { id: "42" } };
 
<Link href={order}>Open order</Link>
router.push(order);

// src/navigation/hrefs.ts
import type { Href } from "expo-router";
 
export const orderDetailHref = (id: string): Href => ({
  pathname: "/orders/[id]",
  params: { id },
});

// app.config.ts
import type { ExpoConfig, ConfigContext } from "expo/config";
 
export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: "TypedRoutesApp",
  slug: "typed-routes-app",
  experiments: {
    typedRoutes: true,
  },
});

app/
├── _layout.tsx
├── settings.tsx
└── orders/
    ├── index.tsx
    └── [id].tsx

// src/navigation/hrefs.ts
import type { Href } from "expo-router";
 
export const hrefs = {
  settings: "/settings" as Href,
  orders: "/orders" as Href,
  orderDetail: (id: string): Href => ({
    pathname: "/orders/[id]",
    params: { id },
  }),
} as const;

// features/orders/ui/OrdersListScreen.tsx
import { Link } from "expo-router";
import { Text, View } from "react-native";
import { hrefs } from "@/navigation/hrefs";
 
export function OrdersListScreen() {
  return (
    <View style={{ padding: 16 }}>
      <Link href={hrefs.orderDetail("99")}>
        <Text>Order 99</Text>
      </Link>
    </View>
  );
}

// features/orders/ui/OrderDetailScreen.tsx
import { useLocalSearchParams } from "expo-router";
import { z } from "zod";
import { Text, View } from "react-native";
 
const paramsSchema = z.object({
  id: z.string().min(1),
});
 
export function OrderDetailScreen() {
  const raw = useLocalSearchParams();
  const parsed = paramsSchema.safeParse(raw);
 
  if (!parsed.success) {
    return (
      <View style={{ padding: 16 }}>
        <Text>Invalid order link</Text>
      </View>
    );
  }
 
  const { id } = parsed.data;
 
  return (
    <View style={{ padding: 16 }}>
      <Text>Order {id}</Text>
    </View>
  );
}

// Compile-time failure examples (do not ship):
// router.push("/orders");           // ❌ missing params for [id] route
// router.push("/settigns");          // ❌ typo in static path
// <Link href="/unknown" />          // ❌ route does not exist in app/

.expo/types/router.d.ts    # Auto-generated - do not hand-edit

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts"]
}

import type { Href } from "expo-router";
 
function navigate(href: Href) {
  router.push(href);
}

app/users/[userId]/posts/[postId].tsx

const href: Href = {
  pathname: "/users/[userId]/posts/[postId]",
  params: { userId: "1", postId: "9" },
};

Compile-time (typed routes):     Developer typos in router.push / Link
Runtime (Zod):                 Deep links, push notifications, malformed URLs

npx expo customize tsconfig.json   # first-time setup if needed
npx expo start --non-interactive & # generate .expo/types
sleep 5
npm run typecheck