What is the Expo Router architecture, and how does file-based routing differ from traditional React Navigation?

Short answer

Expo Router uses the file and folder structure to generate app routes automatically (as in Next.js), with built-in deep-link and Universal Link support and shared web/mobile code.

Explanation

Instead of writing large route configuration files, each file inside app/ represents a screen (for example, app/index.tsx for the home screen and app/profile/[id].tsx for dynamic screens). Expo Router provides features such as nested layouts through _layout.tsx and automatic type-safe routes, while using React Navigation under the hood.

Code example

// Folder structure in Expo Router:
// app/
//   _layout.tsx       // Container and main Stack
//   index.tsx         // Home screen (/)
//   user/
//     [id].tsx        // Dynamic screen (/user/42)

// Use navigation:
import { Link } from 'expo-router';
<Link href="/user/42">Visit profile</Link>;

Common mistakes

• Naming files in ways that conflict with Expo Router conventions, such as unintentionally using names that begin with an underscore, which are reserved for layouts.

Follow-up questions

• How do you implement fully type-safe navigation in React Navigation with TypeScript?
• How do you configure deep links and universal links to open specific screens from external URLs?

Sources

• Expo Router docs — Introduction