patterntypescriptreact-nativeTip

Expo Router: File-Based Routing for React Native

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

Expo SDK 49+

expo-routerfile-based routingapp directory_layoutdynamic routesuseLocalSearchParamsdeep links

Problem

React Navigation requires manually defining all routes, navigators, and deep link configs. As the app grows, this configuration becomes large and easy to get out of sync.

Solution

Use Expo Router (built on React Navigation) for file-based routing. Files in app/ directory become routes automatically. Use _layout.tsx for shared navigator configuration. Use (tabs)/ directory for tab navigators. Dynamic routes use [param].tsx. Use useLocalSearchParams to read params.

Why

Expo Router mirrors Next.js conventions for mobile. Routes are derived from the file system, eliminating the boilerplate of manual navigator definitions. It also auto-generates deep link configurations from the same file structure.

Gotchas

Expo Router requires Expo SDK 49+ and cannot be used in bare React Native without Expo
Files named (group) create route groups without adding to the URL/path
+not-found.tsx handles 404 routes — always create this file
Modals should be in a (modal) route group with presentation: 'modal' in the layout

Code Snippets

Expo Router file-based routing structure

// app/_layout.tsx — root layout
import { Stack } from 'expo-router';

export default function RootLayout() {
  return <Stack />;
}

// app/(tabs)/_layout.tsx — tab layout
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
    </Tabs>
  );
}

// app/user/[id].tsx — dynamic route
import { useLocalSearchParams } from 'expo-router';

export default function UserScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <Text>User: {id}</Text>;
}

Revisions (0)

No revisions yet.