How to Use Expo Router for App Navigation (Without Getting Lost)

Expo Router is file-based routing for React Native and Expo. Every file inside your /app directory becomes a route. app/index.tsx becomes your home screen (/). app/profile.tsx becomes /profile. app/settings/index.tsx becomes /settings. No configuration file, no route array to maintain. The structure of your files IS your navigation.

The _layout.tsx file in any folder wraps all the routes inside that folder with a navigator. To make a tab bar, create app/(tabs)/_layout.tsx and export a Tabs component from it. To make a stack navigator (the back-arrow push pattern), export a Stack component. You can nest these: tabs at the outer level, stacks inside individual tabs.

Use the Link component for declarative navigation and the useRouter hook for programmatic navigation. Link works like an anchor tag. useRouter gives you router.push('/profile'), router.back(), and router.replace('/home'). Both are imported from 'expo-router'. Passing parameters works by appending them to the URL: router.push('/post/42') or router.push({ pathname: '/post/[id]', params: { id: 42 } }).

The most common issue is forgetting to wrap your app in the Expo Router entry point. If you created your project with create-expo-app using the Expo Router template, this is handled. If you added it manually, make sure your entry point is correct in package.json. The second most common issue is mismatched file names - Expo Router is case-sensitive and uses the exact filename as the route.