Overview

Expo Router is a declarative, file-system based router designed for universal React applications, enabling developers to build both native mobile and web experiences from a single codebase. It integrates directly into the Expo ecosystem, extending its capabilities for managing application navigation. The core principle of Expo Router is to map files in a designated app directory to routes, automatically generating navigation stacks, tabs, and modals based on the file structure. This approach streamlines development by removing the need for manual route configuration, which is common in many traditional routing libraries.

Developers using Expo Router benefit from features like deep linking, which allows direct navigation to specific screens within the application from external URLs or notifications. It supports various navigation patterns, including stack navigation, tab navigation, and modal presentations, all configured through the file system. The router is built on top of React Navigation, inheriting its performance and flexibility for native navigation paradigms while adding a simplified, convention-over-configuration layer for route definition. This makes it particularly well-suited for React Native app development and projects requiring extensive code sharing between web and native platforms.

Expo Router is ideal for teams seeking to accelerate development cycles for universal applications. Its emphasis on convention reduces boilerplate code and cognitive load associated with managing complex navigation. It supports advanced routing features such as dynamic routes, which enable the creation of screens based on data identifiers (e.g., [id].js for user profiles), and authenticated routes, which can protect sections of an application based on user login status. For example, a developer can define an (auth) group of routes that only become accessible after a successful authentication flow, ensuring secure access control. This level of granular control, combined with its file-system driven approach, positions Expo Router as a robust solution for scalable, maintainable mobile and web applications.

The framework also offers specific benefits for developer experience. Its comprehensive API reference provides clear guidance on advanced configurations and hooks, such as useRouter for programmatic navigation and useSegments for accessing route parameters. The integration with the broader Expo CLI and development tools further simplifies debugging and deployment workflows. For instance, the Expo Go app allows for rapid iteration and testing of universal routes on physical devices without complex build steps. This holistic approach to development, from routing to deployment, makes Expo Router a compelling choice for projects prioritizing efficiency and cross-platform consistency.

Key features

  • File-system Based Routing: Automatically generates routes and navigation stacks from the app directory structure, reducing manual configuration.
  • Universal Navigation: Provides a unified routing solution for both React Native (iOS/Android) and web applications, enabling extensive code sharing.
  • Deep Linking: Supports direct navigation to specific screens within the application via URLs, enhancing user engagement and external integrations.
  • Dynamic Routes: Allows creation of routes with variable parameters (e.g., /users/[id]) for data-driven content, such as user profiles or product details.
  • Authenticated Routes: Enables protection of specific route groups, ensuring users are authenticated before accessing sensitive parts of the application.
  • Layouts and Groups: Supports nested layouts and route groups for shared UI elements and organized route structures, such as (tabs) or (auth) groups.
  • Programmatic Navigation: Offers hooks like useRouter() for imperative navigation, allowing developers to control routing logic programmatically.
  • Web History Management: Integrates with browser history API for a native-like web experience, including back/forward navigation and URL updates.
  • Type Safety: Provides TypeScript support for route parameters and navigation functions, improving code reliability and developer experience.

Pricing

Expo Router is an open-source library and is free to use. It is distributed under the MIT license.

Product Pricing Model Notes
Expo Router Free and Open-Source Available under the MIT License. No costs associated with usage.

Pricing as of June 2026.

Common integrations

  • React Native: Core integration for building native mobile applications, leveraging components and APIs from the React Native framework.
  • Expo SDK: Seamlessly integrates with the broader Expo SDK, providing access to device APIs, push notifications, and development tools.
  • React Navigation: Built on top of React Navigation, allowing for advanced customization of native navigation components and transitions.
  • TypeScript: Supports TypeScript for type-safe routing, enhancing code quality and reducing runtime errors.
  • Web Browsers: Provides web-specific routing features, including browser history management and URL manipulation, for universal web apps.

Alternatives

  • React Navigation: A standalone, highly customizable navigation solution for React Native, offering imperative control over navigation stacks.
  • Next.js: A React framework for building full-stack web applications, featuring file-system based routing primarily for web (with experimental React Native support).
  • Remix: A web framework focused on web standards, offering nested routing and server-side rendering, primarily for web applications.

Getting started

To begin using Expo Router, first ensure you have Node.js and npm/yarn installed. You can create a new Expo project with Expo Router pre-configured using the Expo CLI. The following steps outline the process:

  1. Install Expo CLI: If you haven't already, install the Expo command-line interface globally.
npm install -g expo-cli
  1. Create a new Expo project with Expo Router: Use the expo init command and select a template that includes Expo Router. A common choice is the tabs template.
expo init my-router-app --template tabs
# Or, to start with a blank Expo Router project:
# expo init my-router-app --template expo-template-blank-typescript --router

After selecting the template, navigate into your new project directory and start the development server:

cd my-router-app
npm start

This will open your project in the Expo development server, allowing you to scan a QR code with the Expo Go app on your phone or open it in a web browser. The project structure will include an app/ directory, where your files will automatically map to routes. For example, creating app/index.js will define the root route of your application.

Here's a basic example of app/index.js:

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

export default function Page() {
  return (
    
      Welcome to Expo Router!
      Go to Details
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  link: {
    color: 'blue',
    fontSize: 18,
    marginTop: 10,
  },
});

And a corresponding app/details.js:

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

export default function DetailsPage() {
  return (
    
      Details Screen
      Go back Home
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  link: {
    color: 'blue',
    fontSize: 18,
    marginTop: 10,
  },
});

These two files create a simple navigation flow between a home screen and a details screen, demonstrating the basic file-system routing mechanism of Expo Router. The Link component from expo-router is used to navigate between routes, similar to how tags work on the web.