Экраны и маршруты на файлах

В мобильном приложении вместо страниц — экраны. Expo Router строит навигацию по файлам: каждый файл в папке app становится экраном со своим адресом, как страницы в Next.js. Писать список маршрутов вручную не нужно.

Новый проект: блог

С этой главы начинается второе приложение — читалка блога. Создайте проект и очистите шаблон:

npx create-expo-app@latest blog
cd blog
npm run reset-project
npx expo start

Expo Router уже установлен и подключён в шаблоне.

Файл — это маршрут

Создайте файл экрана «О приложении»:

// app/about.tsx
import { Text, View } from 'react-native';
 
export default function About() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 18 }}>Блог-читалка. Статьи берутся из JSONPlaceholder.</Text>
    </View>
  );
}

Экран должен экспортировать компонент по умолчанию (export default) — по нему Expo Router понимает, что показывать.

Ссылка на экран

Переход делается компонентом Link из expo-router. Откройте главный экран:

// app/index.tsx
import { Link } from 'expo-router';
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, padding: 16, gap: 12 }}>
      <Text style={{ fontSize: 24 }}>Блог</Text>
      <Link href="/about" style={{ color: '#2563eb', fontSize: 18 }}>
        О приложении
      </Link>
    </View>
  );
}

Нажмите на синюю ссылку — откроется экран «О приложении» с заголовком about в шапке и стрелкой «назад». На Android вернуться можно и системной кнопкой «назад». В браузере (клавиша w) адрес сменится на http://localhost:8081/about.

Ссылка в виде кнопки

Link по умолчанию отображается как текст. Чтобы сделать ссылкой свой компонент, используйте asChild — Link передаст нажатие вложенному Pressable:

// app/index.tsx
import { Link } from 'expo-router';
import { Pressable, Text } from 'react-native';
 
<Link href="/about" asChild>
  <Pressable style={{ backgroundColor: '#2563eb', padding: 12, borderRadius: 8 }}>
    <Text style={{ color: '#fff' }}>О приложении</Text>
  </Pressable>
</Link>

На экране появится синяя кнопка, которая ведёт на тот же экран.

Частая ошибка

Экспортировать компонент экрана по имени: export function About() вместо export default function About(). Expo Router не найдёт, что показывать, выведет в терминал предупреждение об отсутствии экспорта по умолчанию, и экран не откроется. В файлах папки app экран всегда экспортируется через export default. А если в href опечатка, вместо экрана появится «Unmatched Route».