File-System Router

Square brackets make a dynamic segment: src/app/product/[id].tsx matches /product/42 and any other single segment, and the screen reads it with useLocalSearchParams(), which returns id as the string '42'.

Link navigates declaratively when a tap should reach a known href and renders a real anchor on web; the router object suits navigation after logic, such as a finished request. asChild hands Link's press to one child, like a Pressable.

A folder named in parentheses, such as (tabs), groups routes under a shared layout without adding a URL segment, and index.tsx is its folder's default route, so src/app/(tabs)/index.tsx answers / and the tab bar becomes the first screen.

useLocalSearchParams returns the params of the route the component belongs to and ignores other screens' URLs; useGlobalSearchParams follows the currently focused URL and re-renders background screens on every change, so screens should use the local hook.

push always adds a stack entry; navigate adds one unless the target is the screen already on top with the same path params, which it updates in place; replace swaps the current entry, keeping history length unchanged.

Expo Router always adds a not-found route that renders its built-in Unmatched screen; a src/app/+not-found.tsx default export replaces it, and a +not-found.tsx inside a folder handles unmatched URLs under that folder.

Declare the route in its stack layout with a Stack.Screen whose options set presentation: 'modal', or presentation: 'formSheet' plus sheetAllowedDetents such as [0.5, 1] for a sheet that rests at half and full height.

Expo Router derives every screen's URL from its file path, so both links resolve to /waitlist/confirm and open src/app/waitlist/confirm.tsx. For a custom scheme the host counts as the first path segment; for HTTPS the origin is stripped.

With no cookbook/_layout.tsx, the file is hoisted into the root layout under the name cookbook/desserts, so name="desserts" matches nothing; use that relative name, or add a cookbook layout only if the folder needs its own navigator.

usePathname returns the normalized URL path without the query, '/product/42', while useSegments returns the matched file segments as written, ['product', '[id]'], including any (group) names, so pathname suits display and analytics and segments suit structural checks.

Expo Router resolves every navigation to a URL and parses params back out of it, so values are strings; a [...slug] catch-all collects all remaining segments into a string array, giving slug ['guides', 'install'].

Screens wrapped in <Stack.Protected guard={isSignedIn}> are left out of the navigator while the guard is false. A deep link to one lands on the anchor route or first available screen, and a guard flipping false removes their history entries.

router.back goes back however the focused navigator defines it; dismiss(count) pops that many stack screens; dismissTo(href) pops until href is on top or replaces the current screen if it is absent; dismissAll returns to the nearest stack's first screen.

Redirect renders nothing and calls router.replace(href) when its screen gains focus, so the target takes the current history entry; calling router.replace yourself needs the same timing, in a focus effect or handler, never during render.

Create src/app/api/waitlist+api.ts exporting a POST(request) function that returns a Response, with web.output set to server. Code only API routes import runs on the server and is stripped from the client bundle, so the key stays server-side.

single exports one index.html for a client-rendered SPA, static renders an HTML file per route at export time, and server adds a server bundle for API routes. A marketing site wants static, or server once it has its own endpoints.

Since SDK 56 expo-router ships its own copy of the React Navigation code and Expo CLI's Metro resolver rejects @react-navigation/* imports from app code; import ThemeProvider from 'expo-router/react-navigation' (or 'expo-router') instead.

Keep the native splash screen up with SplashScreen.preventAutoHideAsync() until an auth provider in the root layout has read the stored session, then hide it. Stack.Protected guards read that provider, so the first visible frame already has the right screens.

Open sign-in with an href object carrying a returnTo param, validate that it is an internal path, and on success call router.dismissTo(returnTo), which pops back to the cart if it is in history and otherwise replaces sign-in with it.

A deep link builds the stack from the URL alone, so it holds only the modal. Exporting unstable_settings = { anchor: 'index' } from that stack's layout keeps index rendered underneath, and the same anchor is where guarded deep links land.

+html.tsx customises the root HTML document that wraps every statically rendered page. It runs only in Node.js at render time, so window is undefined there, and providers belong in the root layout, which runs in the app.

A deep link builds navigation state from the URL alone, so the cookbook stack holds only desserts; exporting unstable_settings = { initialRouteName: 'index' } from cookbook/_layout.tsx makes Expo Router place index beneath it, restoring a back target.

With experiments.typedRoutes, Expo CLI generates route types from src/app, so TypeScript rejects hrefs to missing routes, dynamic hrefs with wrong params and relative paths; CI must run npx expo customize tsconfig.json before type checking.

In development relative URLs resolve to the Expo dev server, which runs API routes. A release build has no dev server, so the server must be deployed and its URL set as the expo-router plugin's origin before building.