NativeRouter

NativeRouter — это компонент маршрутизатора, используемый в приложениях на React Native, предоставляющий возможности навигации, аналогичные BrowserRouter и HashRouter в веб-приложениях. Он обеспечивает маршрутизацию без использования URL браузера, так как в мобильных приложениях отсутствует стандартная адресная строка. Основное преимущество заключается в том, что NativeRouter позволяет управлять состоянием навигации через внутренний стек маршрутов.

Импорт и базовое использование

Для начала необходимо импортировать NativeRouter из пакета react-router-native:

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

Создание маршрутов осуществляется путем вложения компонентов Route внутрь NativeRouter:

Здесь:

  • exact — строгая проверка соответствия пути;
  • path — путь маршрута;
  • component — компонент, который отобразится при совпадении пути.

В React Native нельзя использовать стандартные теги , поэтому для навигации применяется компонент Link из react-router-native. Он рендерится как Touchable элемент:


  Перейти в профиль

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

Структура стека маршрутов

NativeRouter поддерживает концепцию стека маршрутов. При навигации новые маршруты добавляются в стек, а возврат осуществляется через метод history.goBack(). Важно понимать, что React Router для Native не использует нативные навигационные контроллеры по умолчанию, поэтому при необходимости интеграции с react-navigation или аналогами можно использовать NativeRouter как оболочку для управления логикой маршрутизации.

Использование Switch

Компонент Switch позволяет отображать только первый маршрут, который совпадает с текущим путем:

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

Switch предотвращает одновременное отображение нескольких компонентов при совпадении нескольких путей.

Работа с параметрами маршрута

NativeRouter позволяет передавать параметры в пути:

Внутри компонента доступ к параметрам осуществляется через объект match:

function ProfileScreen({ match }) {
  return Профиль пользователя с ID: {match.params.userId};
}

Навигация программно

Для программного управления маршрутом можно использовать хук useNavigate или объект history:

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

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

  return (

Метод navigate позволяет переходить к маршрутам с возможностью замены текущего состояния или добавления нового элемента в стек.

Интеграция с компонентами React Native

NativeRouter совместим с большинством стандартных компонентов React Native (View, Text, ScrollView). Для сложных интерфейсов можно комбинировать маршруты с табами, Drawer или Stack-компонентами, обеспечивая гибкую архитектуру навигации без потери управляемости маршрутов.

Работа с вложенными маршрутами

Вложенные маршруты создаются путем вложения компонентов Route в другие компоненты:

function ProfileScreen({ match }) {
  return (
    
      Профиль пользователя
      
    
  );
}

Такой подход позволяет строить иерархию маршрутов и создавать модульные экраны с локальной навигацией.

Примечания по производительности

  • Использование Switch и exact позволяет минимизировать количество ререндеров.
  • Компоненты, не зависящие от маршрутов, лучше вынести за пределы NativeRouter.
  • Для сложных навигационных сценариев рекомендуется комбинировать NativeRouter с react-navigation для оптимального управления стэком экранов и анимациями переходов.
Оглавление