Expo Router Tutorial for Beginners: Master File-Based Routing in React Native

If you’ve ever spent hours debugging a complex Stack.Navigator or fighting with nested navigation containers in React Native, you’re not alone. For years, navigation was the most frustrating part of mobile development. That changed with Expo Router. In this expo router tutorial for beginners, I’ll show you how to move away from imperative navigation and embrace a file-based system that feels exactly like building a website with Next.js.

I first started using Expo Router a few months ago on a client project, and the difference in developer velocity was immediate. Instead of defining a massive navigation config file, I just created a folder, dropped in a file, and the route existed. If you are wondering why use Expo instead of React Native CLI, this routing system is one of the strongest arguments in favor of the Expo ecosystem.

Core Concepts of Expo Router

Before we jump into the code, you need to understand the mental shift. Expo Router uses File-Based Routing. This means the structure of your app/ directory defines your app’s navigation graph.

• The app/ Directory: This is where all your routes live. Any file created here automatically becomes a route.
• Index Files: index.tsx represents the root of a directory (e.g., app/index.tsx is your home screen).
• Layouts: _layout.tsx files allow you to wrap children routes with shared UI, like Tab bars or Stack headers.
• Groups: Folders wrapped in parentheses, like (auth), organize your files without adding a segment to the URL path.

Getting Started with Expo Router

To get started, you don’t need a complex setup. The fastest way is to initialize a new Expo project using the recommended template.

npx create-expo-app@latest -t tabs

This template comes pre-configured with Expo Router. Once installed, navigate into your project and start the development server:

cd my-app
npx expo start

As shown in the image below, your project structure will center around the app folder, which is where the magic happens.

Your First Project: Building a Simple App

Let’s build a basic app with a Home screen and a Profile screen. I recommend starting with a clean app/ directory to understand how the routing maps.

Step 1: The Home Screen

Create app/index.tsx. This is your landing page.

import { View, Text } from 'react-native';
import { Link } from 'expo-router';

export default function Home() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to the Home Screen!</Text>
      <Link href="/profile" style={{ color: 'blue', marginTop: 10 }}>
        Go to Profile
      </Link>
    </View>
  );
}

Step 2: The Profile Screen

Create app/profile.tsx. Now, because of the file-based system, /profile is automatically a valid route.

import { View, Text } from 'react-native';
import { Link } from 'expo-router';

export default function Profile() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>This is the Profile Page</Text>
      <Link href="/">Back Home</Link>
    </View>
  );
}

Step 3: Adding a Shared Layout

You don’t want to manually define a header on every page. Create app/_layout.tsx to define a Stack navigator that wraps all your screens.

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack
      screenOptions={{ 
        headerStyle: { backgroundColor: '#f4511e' },
        headerTintColor: '#fff',
      }} 
    />
  );
}

Common Mistakes for Beginners

In my experience, most beginners trip up on these three things:

1. Case Sensitivity: Remember that file names are your routes. Profile.tsx and profile.tsx may behave differently depending on your OS and the build environment. Stick to lowercase for route files.
2. Forgetting the Default Export: Every route file must have a export default component. If you use named exports, Expo Router won’t know what to render.
3. Overcomplicating Layouts: Beginners often try to put all their logic in one _layout.tsx. Use nested layouts (creating _layout.tsx inside sub-folders) to keep your code modular.

Your Learning Path

Once you’ve mastered the basics of this expo router tutorial for beginners, I suggest following this progression:

• Dynamic Routes: Learn how to use [id].tsx to create pages for specific items (like a user profile page).
• Search Parameters: Use useLocalSearchParams to handle query strings.
• Typed Routes: Enable TypeScript route typing to get autocomplete for your href props.
• Deployment: Once your navigation is solid, learn how to deploy your Expo app to the App Store.

Essential Tools for Expo Development

To make your workflow smoother, I highly recommend these tools:

Ready to take your app to the next level? Start by refactoring your current navigation to Expo Router and feel the difference in speed.