This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Expo Router

A file-based routing library for React Native and web applications.

Android

iOS

tvOS

Web

Included in Expo Go

expo-router is a routing library for React Native and web apps. It enables navigation management using a file-based routing system and provides native navigation components.

Expo Router guides

Learn about Expo Router basics, navigation patterns, core concepts, and more.

In SDK 56 and later, Expo Router no longer supports importing from external @react-navigation/* packages in application code. Repoint those imports to the matching expo-router entry points. Run the codemod or follow the SDK 55 to 56 migration guide to update your project.

Installation

To use Expo Router in your project, you need to install. Follow the instructions from the Expo Router's installation guide:

Install Expo Router

Learn how to install Expo Router in your project.

Configuration in app config

If you are using the default template to create a new project, expo-router's config plugin is already configured in your app config.

Example app.json with config plugin

app.json

{
  "expo": {
    "plugins": ["expo-router"]
  }
}

Configurable properties

Name	Default	Description
`root`	`"app"`	Changes the routes directory from `app` to another value. Avoid using this property unless you have a specific need.
`origin`	`undefined`	Production origin URL where assets in the public folder are hosted. The fetch function is polyfilled to support relative requests from this origin in production. The development origin is inferred using the Expo CLI development server.
`headOrigin`	`undefined`	A more specific origin URL used in the `expo-router/head` module for iOS handoff. Defaults to `origin`.
`asyncRoutes`	`{ web: true }`	Enable async routes (lazy loading). Stable and enabled by default on web in SDK 58 and later. Experimental and disabled by default on native. Can be an `AsyncRouteOption` or an object with platform-specific `AsyncRouteOption` values (`{ android, ios, web, default }`). Explicit platform values take precedence over `default`. Production async routes are web-only.
`platformRoutes`	`true`	Enable or disable platform-specific routes (for example, index.android.tsx and index.ios.tsx).
`sitemap`	`true`	Enable or disable the automatically generated sitemap at /_sitemap.
`partialRouteTypes`	`true`	Enable partial typed routes generation. This allows TypeScript to provide type checking for routes without requiring all routes to be statically known.
`redirects`	`undefined`	An array of static redirect rules. Each rule is a `RedirectConfig` with `source`, `destination`, and optionally `permanent` (defaults to `false`) and `methods` (HTTP methods to redirect).
`rewrites`	`undefined`	An array of static rewrite rules. Each rule is a `RewriteConfig` with `source`, `destination`, and optionally `methods` (HTTP methods to rewrite).
`headers`	`undefined`	A list of headers that are set on every route response from the server. The value can be a string or an array of strings.
`pageHeaders`	`undefined`	An array of header rules that are set on a specific page's response from the server. Each rule is a `PageHeadersConfig` with `source` and `headers`. Rules only apply to page responses, not API routes or data loaders.
`disableSynchronousScreensUpdates`	`false`	Disable synchronous layout updates for native screens. This can help with performance in some cases.
`unstable_useServerMiddleware`	`false`	Deprecated No longer required as of SDK 58 and has no effect. Remove this option from your app config.
`unstable_useServerDataLoaders`	`false`	Deprecated No longer required as of SDK 58 and has no effect. Remove this option from your app config.
`unstable_useServerRendering`	`false`	Deprecated No longer required as of SDK 58 and has no effect. Remove this option from your app config.
`apiRoutes`	`Depends on web.output`	Enable API routes with static or server output. Defaults to `true` for server output and `false` for static output.

Usage

For information core concepts, notation patterns, navigation layouts, and common navigation patterns, start with Router 101 section:

Router 101

APIs

API	Description
Stack	Stack navigator, toolbar, and screen components
Link	Link and Redirect components
Color	Platform color utilities
Native Tabs	Native tab navigation
Split View	Split view layout
UI	Headless tab components

API

import { useRouter, Tabs, Navigator, Slot } from 'expo-router';

No API data file found, sorry!