Expo Router File-Based Routing: The Patterns That Matter in a Real App
in Expo Router, your folder structure is your navigation. _layout.tsx files decide how screens are shown (stack, tabs, modal), route groups like (tabs) organize screens without changing URLs, [id].tsx handles dynamic routes, and every screen is deep-linkable automatically. The basics take ten minutes to learn. This guide covers the patterns you actually need once the app has auth, tabs, modals…
Expo Router utilizes a folder structure to manage navigation in an app. Files within the app/ directory represent individual routes. For example, app/settings.tsx corresponds to the URL /settings, while app/projects/[id].tsx maps to /projects/42. Layouts, or the way screens are displayed, are defined using _layout.tsx files. There are a few key naming conventions: index.tsx serves as the default route (e.g., / or /projects), [param].tsx indicates a dynamic segment (accessible via useLocalSearchParams()), and [...rest].tsx acts as a catch-all for any nested path.
Additionally, / (group)/ organizes files without appearing in the URL, and +not-found.tsx handles unmatched routes.
To create a classic mobile layout with tabs inside a stack, the root layout is defined as a Stack, and the tabs navigator is placed within it. In app/, you have _layout.tsx as the root Stack, a (tabs)/ folder containing the tabs navigator, a projects/ folder with individual project screens, and a +not-found.tsx for unmatched routes.
Within _layout.tsx, the root Stack is defined, and the tabsOptions constant sets the header to be hidden. The tabs layout is then defined in app/(tabs)/_layout.tsx using the Tabs component from Expo Router. Constants for each tab's options, such as homeOptions, searchOptions, and settingsOptions, are defined to customize each tab's appearance.
When navigating to /projects/42 from any tab, the detail screen is pushed onto the root stack, covering the tab bar and allowing for native back gestures. Placing projects/[id].tsx inside (tabs) would result in it becoming a regular tab, which is usually undesirable. Screen options are defined as constants outside the JSX to improve readability and save time by avoiding the recreation of option objects on each render.
A modal is essentially a stack screen presented differently. In app/, you'd have _layout.tsx, a (tabs)/ folder, and a new-project.tsx screen for the modal. In _layout.tsx, the root Stack is extended to include a new-project screen with its own modalOptions. When opened, new-project.tsx is displayed over the tabs from anywhere in the app, and closed using router.back() or router.dismiss() on iOS. This placement ensures the modal can be accessed from any part of the app.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
