Expo Router

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

Android

iOS

tvOS

Web

Included in Expo Go

Recommended version:

~56.2.21

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`	`undefined`	Enable async routes (lazy loading). Can be a boolean, a string (`"development"` or `"production"`), or an object with platform-specific values (`{ android, ios, web, default }`). `production` is currently web-only and will be disabled on native.
`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 should have `source`, `destination`, and optionally `permanent` (defaults to `false`) and `methods` (HTTP methods to redirect).
`rewrites`	`undefined`	An array of static rewrite rules. Each rule should have `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.
`disableSynchronousScreensUpdates`	`false`	Disable synchronous layout updates for native screens. This can help with performance in some cases.
`unstable_useServerMiddleware`	`false`	Experimental Enable server middleware support with a `+middleware.ts` file. Requires `web.output: "server"` to be set in app config.
`unstable_useServerDataLoaders`	`false`	Experimental Enable data loader support. This is only supported for `web.output: "static"` outputs at the moment.
`unstable_useServerRendering`	`false`	Experimental Enable server-side rendering. When enabled with `web.output: "server"`, HTML is rendered at request time instead of being pre-rendered at build time.

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!