React Academy · Урок

Навигация с Expo Router

Настройте Expo Router для навигации на основе файлов, типизированных маршрутов и глубоких ссылок.

«Навигация с Expo Router» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое Expo Router

Expo Router — это библиотека маршрутизации на основе файлов для React Native, созданная на базе React Navigation. Как и маршрутизатор приложения Next.js, структура файлов определяет маршруты навигации.

Установка

Создайте новый проект Expo с предварительно настроенным Expo Router.

# Create new project:
npx create-expo-app@latest my-app --template tabs

# Or add to existing Expo project:
npx expo install expo-router react-native-safe-area-context react-native-screens

Маршруты на основе файлов

Файлы в каталоге app/ автоматически становятся маршрутами. index.tsx — корневой маршрут, а [id].tsx — динамический сегмент.

app/
  _layout.tsx       # root layout (Stack navigator)
  index.tsx          # → / (home screen)
  profile.tsx        # → /profile
  posts/
    _layout.tsx      # posts stack layout
    index.tsx        # → /posts
    [id].tsx         # → /posts/123 (dynamic)

Корневая компоновка

Корневой файл _layout.tsx оборачивает все экраны в провайдеры и определяет навигатор верхнего уровня.

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

Навигация с помощью Link

Используйте компонент Link из expo-router для декларативной навигации — аналогично next/link.

import { Link } from 'expo-router';

function HomeScreen() {
  return (
    <Link href="/profile">Go to Profile</Link>
  );
}

Навигация с помощью useRouter

Используйте useRouter() для императивной навигации — программно переходите вперёд, заменяйте маршрут или возвращайтесь назад.

import { useRouter } from 'expo-router';

function LoginForm() {
  const router = useRouter();

  async function handleLogin() {
    await login();
    router.replace('/dashboard');
  }
}

Динамические маршруты

Получайте параметры маршрута с помощью useLocalSearchParams() в файле динамического маршрута.

// app/posts/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function PostScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <PostDetail postId={id} />;
}

Навигация по вкладкам

Используйте Tabs из expo-router внутри компоновки группы для навигации по нижним вкладкам.

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
    </Tabs>
  );
}

Модальные экраны

Представьте экран как модальное окно, задав presentation: 'modal' в параметрах Stack.Screen.

// app/_layout.tsx
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Settings' }} />

// Navigate to modal:
router.push('/modal');

Глубокие ссылки

Expo Router автоматически обрабатывает глубокие ссылки. Определите схему URL в app.json, и ссылки вроде myapp://posts/123 откроют нужный экран.

// app.json
{
  "expo": {
    "scheme": "myapp"
  }
}

Шаблон аутентификации

Используйте корневую компоновку, которая в зависимости от состояния аутентификации отображает экраны входа или вкладки приложения.

// app/_layout.tsx
import { Redirect } from 'expo-router';

function RootLayout() {
  const { user } = useAuth();
  if (!user) return <Redirect href="/login" />;
  return <Stack />;
}

Проверка знаний

Какой хук Expo Router считывает параметры динамического маршрута, например id в /posts/[id]?

Итоги

Expo Router использует маршрутизацию на основе файлов: app/index.tsx → главный экран, app/[id].tsx → динамический маршрут. Определяйте компоновки в _layout.tsx, переходите по маршрутам с помощью Link или useRouter(), а параметры считывайте с помощью useLocalSearchParams().

Часто задаваемые вопросы

Урок «Навигация с Expo Router» бесплатный?

Да — полный текст урока «Навигация с Expo Router» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Навигация с Expo Router»?

Настройте Expo Router для навигации на основе файлов, типизированных маршрутов и глубоких ссылок. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Навигация с Expo Router»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy