Navigate between pages

Create links to move between pages.

Expo Router uses "links" to move between pages in the app. This is conceptually similar to how the web works with <a> tags and the href attribute.

In the following example, there are two <Link /> components which navigate to different routes.

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

export default function Page() {
  return (
    <View>
      <Link href="/about">About</Link>

      <Link href="/user/bacon">View user</Link>
    </View>
  );
}

Buttons

The Link component wraps the children in a <Text> component by default, this is useful for accessibility but not always desired. You can customize the component by passing the asChild prop, which will forward all props to the first child of the Link component. The child component must support the onPress and onClick props, href and accessibilityRole will also be passed down.

import { Pressable, Text } from "react-native";
import { Link } from "expo-router";

export default function Page() {
  return (
    <Link href="/other" asChild>
      <Pressable>
        <Text>Home</Text>
      </Pressable>
    </Link>
  );
}

Imperative navigation

You may want to navigate from a global store when a user logs in or out. You can use the router object to navigate imperatively (outside of React).

import { router } from 'expo-router';

export function logout() {
  router.replace('/login');
}

The router object is immutable and contains the following functions:

• push: (href: Href) => void Navigate to a route. You can provide a full path like /profile/settings or a relative path like ../settings. Navigate to dynamic routes by passing an object like { pathname: 'profile', params: { id: '123' } }.
• replace: (href: Href) => void Same API as push but replaces the current route in the history instead of pushing a new one. This is useful for redirects.
• back: () => void Navigate back to previous route.
• canGoBack: () => boolean Returns true if a valid history stack exists and the back() function can pop back.
• setParams: (params: Record<string, string>) => void Update the query params for the currently selected route.

Linking to dynamic routes

Dynamic routes and query parameters can be provided statically or with the convenience Href object.

import { Link } from 'expo-router';

export default function Page() {
  return (
    <View>
      <Link
        href={{
          pathname: "/user/[id]",
          params: { id: 'bacon' }
        }}>
          View user
        </Link>
    </View>
  );
}

Replacing screens

By default, links "push" routes onto the navigation stack. This means that the previous screen will be available when the user navigates back. You can use the replace prop to replace the current screen instead of pushing a new one.

import { Link } from 'expo-router';

export default function Page() {
  return (
    <View>
      <Link
        replace
        href="/feed">
        Login
      </Link>
    </View>
  );
}

Use router.replace() to replace the current screen imperatively.

Native navigation does not always support replace. For example on Twitter, you wouldn't be able to "replace" directly from a profile to a tweet, this is because the UI requires a back button to return to the feed or other top-level tab screen. In this case, replace would switch to the feed tab, and push the tweet route on top of it, or if you were on a different tweet inside the feed tab, it would replace the current tweet with the new tweet. This exact behavior can be obtained in Expo Router by using unstable_settings.

Autocomplete

Expo Router can automatically generate static TypeScript types for all routes in your app. This allows you to use autocomplete for hrefs and get warnings when invalid links are used. Learn more: Statically Typed Routes.

Web behavior

Expo Router supports the standard <a> element when running on web, however this will perform a full-page server-navigation. This is slower and doesn't take full advantage of React. Instead, the Expo Router <Link> component will perform client-side navigation, this will preserve the state of the website and navigate faster.

Client-side navigation works with both single-page apps, and static rendering.

Usage in simulators

See the testing URLs guide to learn how you can emulate deep links in simulators and emulators.

Next steps