React Router в React Native

React Router предоставляет мощный и гибкий инструмент для организации навигации в приложениях на React и React Native. В отличие от веб-версии, в React Native маршрутизация требует работы с навигационными стеками, табами и drawer-компонентами, что обеспечивает нативное поведение приложения.

Установка и настройка

Для работы с React Router в React Native требуется установка следующих пакетов:

npm install react-router-native

или

yarn add react-router-native

react-router-native является адаптацией React Router для мобильной платформы и работает поверх компонентов react-native.

Основные компоненты

1. <NativeRouter> Оборачивает все приложение, обеспечивая контекст маршрутизации. Он выполняет функции <BrowserRouter> в вебе:

import { NativeRouter } from 'react-router-native';

<NativeRouter>
  <App />
</NativeRouter>

2. <Route> Отвечает за отображение компонентов в зависимости от текущего пути:

import { Route } from 'react-router-native';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

<Route exact path="/" component={HomeScreen} />
<Route path="/profile" component={ProfileScreen} />

exact гарантирует точное совпадение пути, что предотвращает нежеленное отображение нескольких компонентов одновременно.

3. <Link> и <Redirect> <Link> позволяет создавать навигационные элементы:

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

<Link to="/profile">
  <Text>Перейти в профиль</Text>
</Link>

<Redirect> используется для автоматической переадресации:

<Redirect to="/login" />

Навигация с использованием стека

Для имитации навигации в виде стека чаще применяют комбинацию <Route> и history объекта. В React Router версии 6 useNavigate заменяет устаревший history.push:

import { useNavigate } from 'react-router-native';

const HomeScreen = () => {
  const navigate = useNavigate();

  return (
    <Button
      title="Перейти в профиль"
      onPr ess={() => navigate('/profile')}
    />
  );
};

useNavigate позволяет программно изменять маршрут, поддерживая плавный переход между экранами.

Параметры маршрута

React Router поддерживает динамические параметры пути:

<Route path="/user/:id" component={UserScreen} />

В компоненте можно получить параметр с помощью useParams:

import { useParams } from 'react-router-native';

const UserScreen = () => {
  const { id } = useParams();
  return <Text>Пользователь ID: {id}</Text>;
};

Вложенные маршруты

Вложенные маршруты позволяют строить сложную иерархию экранов:

<Route path="/dashboard" component={Dashboard}>
  <Route path="stats" component={StatsScreen} />
  <Route path="settings" component={SettingsScreen} />
</Route>

Вложенные маршруты рендерятся через <Outlet>:

import { Outlet } from 'react-router-native';

const Dashboard = () => (
  <View>
    <Text>Панель управления</Text>
    <Outlet />
  </View>
);

Обработка несуществующих маршрутов

Для отображения страницы 404 используют wildcard путь:

<Route path="*" component={NotFoundScreen} />

Такой маршрут срабатывает, если ни один из предыдущих не совпал.

Навигация с параметрами запроса

React Router поддерживает query-параметры через useSearchParams:

import { useSearchParams } from 'react-router-native';

const SearchScreen = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');

  return <Text>Результаты поиска: {query}</Text>;
};

Изменение параметров запроса происходит через setSearchParams.

Работа с историей навигации

useNavigate и useLocation позволяют управлять историей:

import { useLocation } from 'react-router-native';

const CurrentRoute = () => {
  const location = useLocation();
  return <Text>Текущий путь: {location.pathname}</Text>;
};

useLocation полезен для реакции на изменения маршрута, а useNavigate — для переходов.

Интеграция с табами и drawer

React Router можно комбинировать с нативными навигационными компонентами, используя <Link> и маршруты:

import { Link, Route, NativeRouter } from 'react-router-native';
import { View, Text } from 'react-native';

const App = () => (
  <NativeRouter>
    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
      <Link to="/home"><Text>Главная</Text></Link>
      <Link to="/profile"><Text>Профиль</Text></Link>
    </View>
    <Route path="/home" component={HomeScreen} />
    <Route path="/profile" component={ProfileScreen} />
  </NativeRouter>
);

Такое сочетание позволяет создавать интерфейс с табами, при этом управляя состоянием через маршруты.

Советы по оптимизации

  • Использовать React.memo для компонентов, рендерящихся на разных маршрутах, чтобы избежать лишних перерисовок.
  • Динамическая загрузка компонентов через React.lazy и <Suspense> снижает размер начальной сборки.
  • Централизованная обработка редиректов через отдельный компонент помогает поддерживать чистую структуру маршрутов.

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

Оглавление