On the web, a URL bar shows where you are, and the back button walks through history. On a phone, users see neither: they see screens sliding in from the right, a back arrow or swipe, and tabs at the bottom. Underneath, Expo Router still gives every screen a URL, which is what makes deep links, typed navigation and a web version possible. You get both models at once.
\nExpo Router builds your navigation from the files in src/app. The path of the file is the route:
src/app/\n _layout.tsx wraps everything below in a navigator\n index.tsx /\n about.tsx /about\n settings/\n _layout.tsx wraps the settings screens\n index.tsx /settings\n units.tsx /settings/units\n +not-found.tsx any URL that doesn't matchEach route file default-exports a component. That’s all a screen is:
\nimport { Text, View } from 'react-native';\n\nexport default function About() {\n return (\n <View style={{ flex: 1, padding: 16 }}>\n <Text>Trailhead keeps a private log of your hikes.</Text>\n </View>\n );\n}Because every file in the folder becomes a route, keep everything else elsewhere: src/components, src/lib, src/state. A row component accidentally saved in src/app becomes a screen that anyone can deep-link to.
A _layout.tsx file renders a navigator around the routes in its folder. Trailhead’s root layout uses a Stack, the native push-and-pop navigator with platform animations, swipe-back on iOS and the system back gesture on Android:
import { Stack } from 'expo-router';\n\nexport default function RootLayout() {\n return (\n <Stack screenOptions={{ headerTintColor: '#2f6f4e' }}>\n <Stack.Screen name=\"index\" options={{ title: 'Trailhead' }} />\n <Stack.Screen name=\"about\" options={{ title: 'About' }} />\n </Stack>\n );\n}screenOptions applies to every screen in the stack; each Stack.Screen customizes one, matched by its route name. You don’t have to list every route: unlisted ones still work with default options.
A few header options cover most needs: title, headerShown: false for screens that draw their own top bar (like the full-screen map from the last lesson), headerBackTitle for the label next to the iOS back arrow, and headerRight for a button such as “Edit”. On iOS, headerLargeTitle: true gives you the big collapsing title from Apple’s own apps, which suits a top-level list like the hike log.
When a title depends on data (the hike’s name, say), render <Stack.Screen options={{ title: hike.name }} /> inside the screen itself. It renders nothing visible; it configures the header of the screen it’s in.
For anything the user taps, use Link. It renders text by default; with asChild it hands navigation to your own pressable component:
import { Link } from 'expo-router';\nimport { Pressable, Text, View } from 'react-native';\n\nexport default function HikeLog() {\n return (\n <View style={{ flex: 1, padding: 16, gap: 12 }}>\n <Link href=\"/about\">About Trailhead</Link>\n <Link href=\"/settings\" asChild>\n <Pressable accessibilityRole=\"button\">\n <Text>Settings</Text>\n </Pressable>\n </Link>\n </View>\n );\n}From code, after a save or a login, use the router object:
import { router } from 'expo-router';\n\nrouter.push('/settings/units'); // add a screen on top\nrouter.back(); // pop the top screen\nrouter.replace('/'); // swap the current screen; no way back to itpush is the normal forward move. replace is for flows where returning makes no sense: after onboarding, after logging in, after a “saved!” confirmation. back is what the header’s back arrow and the swipe gesture already do; call it yourself after a form saves so the user lands where they came from. There’s also router.navigate, which goes to a route and, if that route is already in the stack, returns to it instead of pushing a duplicate.
It’s tempting to treat the stack like browser history, but there’s one difference that matters: every screen in the stack stays mounted. When you push the hike detail screen, the log underneath keeps its state and scroll position, and its effects keep running. That’s why going back is instant, and also why a screen’s useEffect doesn’t re-run when you return to it. When you need to refresh data every time a screen comes back into view, Expo Router provides useFocusEffect, which runs when the screen gains focus and cleans up when it loses it.
+not-found.tsx renders for any URL that doesn’t match a route, which on mobile happens mostly through deep links from old emails or a renamed screen. Give it a friendly message and a Link home.
Thinking in URLs pays off later in this section: a notification can open /hikes/42 directly, a link in a message can open the app on the right screen, and the same routes run on the web if you ever build Trailhead for it.
Next you’ll add tabs at the bottom of the app, a detail screen for each hike, and pass the hike’s id through the URL.
\n","toc":[{"id":"sec-1","text":"Files are routes","level":2},{"id":"sec-2","text":"Layouts wrap their siblings","level":2},{"id":"sec-3","text":"Moving between screens","level":2},{"id":"sec-4","text":"A stack is not browser history","level":2},{"id":"sec-5","text":"Not-found and why URLs still matter","level":2}],"takeaways":["Every file insrc/app is a route, and its path is the URL; keep components, hooks and utilities outside that folder.","A _layout.tsx file wraps its sibling routes in a navigator, such as a native Stack.","Use <Link href> for navigation the user taps, and router.push, router.replace and router.back from code.","push adds a screen to the stack, back pops it, and replace swaps the current screen so the user can’t go back to it."],"further":[{"title":"Expo Router introduction","url":"https://docs.expo.dev/router/introduction/"},{"title":"Core concepts of file-based routing","url":"https://docs.expo.dev/router/basics/core-concepts/"},{"title":"Navigating between pages","url":"https://docs.expo.dev/router/basics/navigation/"}],"quiz":[{"q":"You add src/app/HikeRow.tsx to hold a reusable list row component. What happens?
Screen in the name as routes.","why":"There’s no naming rule like that. Every file in the app directory is a route."},{"text":"Expo Router registers it as a route at /HikeRow, so a component meant for reuse becomes a navigable screen.","why":"Correct. Put shared components in src/components (or anywhere outside src/app)."},{"text":"The build fails, because route files must be lower-case.","why":"Case doesn’t make a file a non-route. It still registers, at /HikeRow."}],"answer":1},{"q":"After a user finishes onboarding, Trailhead navigates to the hike log. Pressing back should not return to onboarding. Which call fits?
","options":[{"text":"router.push('/')","why":"push leaves onboarding underneath, so back returns to it."},{"text":"router.back()","why":"That goes to whatever was before onboarding, which isn’t the hike log."},{"text":"router.replace('/')","why":"Correct. replace swaps the current screen for the new one, so there’s nothing to go back to."}],"answer":2},{"q":"Where does a header title for the /settings screen belong?
<Stack.Screen name="settings" options={{ title: 'Settings' }} />, or set from the screen itself with the same component.","why":"Correct. Options can live in the layout (good for static titles) or be rendered inside the screen (good when they depend on data)."},{"text":"In app.json under expo.routes.settings.title.","why":"There’s no such key. Navigation options live in your layouts and screens."},{"text":"In a <title> element at the top of the screen’s JSX.","why":"That’s HTML. Native headers are configured through navigator options."}],"answer":0}],"exercise":{"kind":"fill","language":"text","template":"# URL file that renders it\n/ src/app/{{0}}.tsx\n/settings src/app/settings/{{1}}.tsx\n/settings/units src/app/settings/{{2}}.tsx\n(Stack around settings/*) src/app/settings/{{3}}.tsx\n(any unknown URL) src/app/{{4}}.tsx\n\n# In code, after the units form saves, return to /settings:\nrouter.{{5}}();","blanks":[{"answers":["index"]},{"answers":["index"]},{"answers":["units"]},{"answers":["_layout"]},{"answers":["+not-found"]},{"answers":["back","dismiss"]}],"title":"Map Trailhead's URLs to files","prompt":"Fill in the file names (without .tsx) so Expo Router renders each URL from the right file, wraps the settings screens in their own layout, and shows a friendly screen for unknown URLs. Then pick the router method that returns from /settings/units to /settings after a save without stacking a duplicate screen.
/ or /settings) comes from a file with the same name in both places.","Layout files and the not-found file have special prefixes: an underscore and a plus sign.","The header’s back arrow does the same thing as the method you need."],"explanation":"index.tsx renders a folder’s own URL, so both / and /settings come from an index file. units.tsx inside settings/ becomes /settings/units. _layout.tsx wraps its sibling routes in a navigator, and +not-found.tsx catches unmatched URLs. After saving, router.back() pops the units screen and reveals the settings screen that was already underneath; push('/settings') would stack a second copy.