Expo Router to potężne, a zarazem niezwykle proste narzędzie do zarządzania nawigacją w aplikacjach mobilnych i webowych opartych na React Native. Dzięki niemu możesz budować prawdziwie uniwersalne aplikacje z jedną, spójną strukturą routingu — bez zbędnej konfiguracji. Jeśli szukasz sposobu na szybszy rozwój, lepszy porządek w kodzie i łatwiejszą skalowalność, to właśnie tu znajdziesz odpowiedź. Ten przewodnik poprowadzi Cię krok po kroku przez możliwości Expo Routera — od podstaw po zaawansowane scenariusze produkcyjne.
Expo Router to nowoczesny sposób zarządzania nawigacją w aplikacjach mobilnych tworzonych za pomocą Expo i React Native. Umożliwia tworzenie tras (routów) w stylu znanym z frameworków webowych jak Next.js, czyli za pomocą struktury plików.
Zamiast ręcznego konfigurowania tras, wystarczy utworzyć odpowiednie pliki i foldery w katalogu app/ — każdy z nich automatycznie staje się stroną w aplikacji. To podejście przypomina routing znany z frameworków webowych, takich jak Next.js, i sprawia, że budowanie aplikacji działających jednocześnie na Androidzie, iOS i w przeglądarce staje się wyjątkowo proste. Choć działa na silniku React Navigation, Expo Router usuwa dużą część konfiguracji, oferując czytelność, spójność i pełną obsługę deep linków bez dodatkowego wysiłku.
Expo Router opiera się na kilku fundamentalnych zasadach, które nadają mu prostotę i przejrzystość, a jednocześnie pozwalają na budowanie zaawansowanych struktur nawigacyjnych w aplikacjach multiplatformowych. To podejście eliminuje konieczność ręcznej konfiguracji tras i zastępuje ją logicznym odwzorowaniem ścieżek za pomocą plików i folderów.
3.1. File-based routing
Podstawowym założeniem Expo Routera jest to, że każdy plik znajdujący się w katalogu app/ odpowiada jednej trasie w aplikacji. Struktura folderów odzwierciedla strukturę adresów URL, zarówno na webie, jak i w aplikacjach natywnych. Dzięki temu ścieżka do pliku app/profile/settings.tsx generuje trasę /profile/settings, bez konieczności dopisywania kodu konfigurującego. Router obsługuje także dynamiczne ścieżki oraz dodatkowe pliki konfiguracyjne, takie jak +html.tsx (dla konfiguracji HTML), +not-found.tsx (dla 404), czy nawiasowane grupy tras, np. (tabs).
3.2. _layout.tsx = App.tsx
Plik _layout.tsx pełni funkcję globalnego wrappera aplikacji — odpowiada za układ i logikę, które wcześniej umieszczało się w pliku App.tsx. To właśnie tutaj ładowane są czcionki, integrowane są providery (np. kontekst autoryzacji) czy kontrolowany jest splash screen. Można mieć wiele layoutów — osobne dla poszczególnych części aplikacji — co daje elastyczność bez utraty przejrzystości.
3.3. Deep linking out-of-the-box
Expo Router domyślnie generuje trasy, które można używać jako linki zewnętrzne — zarówno w wersji webowej, jak i mobilnej. Deep linki działają bez dodatkowej konfiguracji routingu. Wystarczy określić schemat URI w pliku app.json, a każda trasa w aplikacji stanie się dostępna przez pełny adres, np. myapp://profile/settings lub https://myapp.com/profile/settings.
3.4. Rozdział komponentów
Folder app/ powinien zawierać wyłącznie trasy — czyli pliki, które odpowiadają ekranom. Pozostała logika, komponenty UI, hooki czy narzędzia powinny być trzymane w osobnych folderach, takich jak components/, hooks/ czy utils/. Dzięki temu unikamy przypadkowego potraktowania zwykłego komponentu jako trasy oraz zachowujemy klarowną strukturę kodu.
3.5. Domyślna trasa startowa
Expo Router nie wymaga deklarowania ekranu startowego w kodzie. Automatycznie wybierany jest pierwszy plik index.tsx, który odpowiada trasie /. Jeśli chcesz, aby użytkownik zaczynał w innej części aplikacji, możesz umieścić ekran startowy w grupie tras, np. app/(tabs)/index.tsx. Taki folder nie wpłynie na końcowy adres URL, ale pozwoli zorganizować logicznie strukturę nawigacyjną.
3.6. Expo Router działa na React Navigation
Mimo że Expo Router upraszcza sposób definiowania tras, pod spodem nadal działa na bazie React Navigation. Automatycznie tłumaczy strukturę plików na komponenty stosów, tabów i modali, które w klasycznym podejściu trzeba by zdefiniować ręcznie. Dzięki temu możesz korzystać z pełnej dokumentacji React Navigation, jego opcji stylizacji i zaawansowanych mechanizmów konfiguracyjnych.
Expo Router oferuje zestaw funkcji, które upraszczają pracę z nawigacją, a jednocześnie dają dużą kontrolę nad zachowaniem aplikacji. Choć jego działanie jest mocno zautomatyzowane, nie oznacza to ograniczenia możliwości — przeciwnie, większość potrzebnych mechanizmów jest dostępna od razu, bez dodatkowej konfiguracji.
Jedną z najważniejszych cech jest wbudowane deep linkowanie. Każda trasa utworzona w strukturze plików jest automatycznie dostępna jako adres URL — zarówno w wersji mobilnej (z użyciem schematów URI), jak i w przeglądarce. Dzięki temu możliwe jest kierowanie użytkownika do konkretnego ekranu aplikacji z poziomu linku w wiadomości, przeglądarce czy powiadomieniu push, bez pisania własnej logiki obsługi linków.
Router został również zoptymalizowany pod względem wydajności. W trybie produkcyjnym trasy ładowane są dynamicznie, czyli tylko wtedy, gdy są potrzebne. W trybie deweloperskim wykorzystywana jest funkcja Fast Refresh dostępna na każdej platformie, co znacznie przyspiesza iterację kodu. Dodatkowo, Metro bundler wbudowany w Expo wspiera automatyczne dzielenie paczek (bundle splitting) oraz modyfikację konfiguracji bundla.
Expo Router integruje się bezproblemowo z natywnymi funkcjonalnościami i bibliotekami. Dzięki autolinkingowi, instalowanie zależności działających na poziomie natywnym nie wymaga ręcznego linkowania czy edycji plików projektu. Wystarczy zainstalować bibliotekę i ponownie uruchomić pod install, a Expo zajmie się resztą.
Ważną zaletą jest również podejście uniwersalne — ta sama struktura trasy i layoutów działa niezależnie od platformy. Dzięki temu możesz tworzyć aplikacje, które wyglądają i zachowują się spójnie na Androidzie, iOS oraz w przeglądarce. Dodatkowo Expo Router wspiera pliki konfiguracyjne specyficzne dla webu, takie jak +html.tsx czy +not-found.tsx, umożliwiając np. własny kod HTML startowy lub obsługę błędów 404 w stylu webowym.
Na koniec warto dodać, że Router wspiera komponenty <Link /> i <Stack />, co pozwala tworzyć nawigację z użyciem znanych mechanizmów z Reacta. Można też korzystać z dynamicznych tras, modali, przekierowań oraz własnych logik nawigacyjnych, co daje dużą swobodę — mimo że większość działa „automatycznie”.
Podsumowując – najważniejsze cechy Expo Router to:
– routing oparty na strukturze plików (app/)
– automatyczne deep linkowanie bez dodatkowej konfiguracji
– obsługa dynamicznych tras, modali, przekierowań i błędów 404
– obsługa layoutów dla grup tras i globalnego UI (_layout.tsx)
– lazy loading tras w trybie produkcyjnym
– fast Refresh dostępny na Androidzie, iOS i webie
– wsparcie dla autolinkingu bibliotek natywnych
– pełna integracja z Metro bundlerem i podziałem paczek
– uniwersalna struktura routingu działająca na każdej platformie
– kompatybilność z komponentami <Link /> i innymi mechanizmami React Navigation
Rozpoczęcie pracy z Expo Routerem jest wyjątkowo proste, szczególnie jeśli masz już doświadczenie z Reactem lub Expo. Narzędzie działa „out of the box” i nie wymaga ręcznej konfiguracji ani instalacji dodatkowych bibliotek. Cały proces sprowadza się do kilku komend i kilku minut.
Najszybszym sposobem na uruchomienie projektu z wbudowanym Expo Routerem jest użycie oficjalnego szablonu, który zawiera gotową strukturę tras oraz przykładowe layouty. Polecanym wyborem na start jest template oparty na tabach, który możesz wygenerować za pomocą jednej komendy:
npx create-expo-app@latest --template tabs@50
Po utworzeniu projektu wystarczy przejść do jego katalogu i uruchomić aplikację komendą:
npx expo start
Wygenerowany projekt zawiera katalog app/, w którym znajdują się przykładowe pliki tras (index.tsx, two.tsx), layout (_layout.tsx) oraz specjalne pliki jak +html.tsx i +not-found.tsx. Dzięki temu możesz od razu podejrzeć, jak działa routing, jak wygląda struktura nawigacyjna i jak zarządzać widokami tabów.
Cała logika nawigacji działa od razu — bez dodatkowej konfiguracji czy definiowania stacków. Możesz od razu dodawać nowe ekrany, modyfikować layouty i rozszerzać projekt według własnych potrzeb. Dzięki temu Expo Router pozwala Ci skupić się na budowie produktu, a nie infrastrukturze.
Odpowiednia struktura projektu to jeden z kluczowych czynników wpływających na skalowalność i łatwość utrzymania aplikacji. Chociaż Expo Router daje sporo swobody, warto trzymać się kilku sprawdzonych zasad, które pomagają zachować porządek — szczególnie w większych projektach.
Najważniejsze jest konsekwentne rozdzielenie logiki nawigacyjnej od reszty kodu aplikacji. Folder app/ powinien zawierać wyłącznie pliki tras — czyli ekrany, które są renderowane w odpowiedzi na konkretny URL. Każdy z tych plików stanowi osobną stronę, a ich ułożenie w folderach tworzy strukturę nawigacji. Jeśli korzystasz z layoutów dla zakładek, modali czy innych elementów interfejsu, umieszczaj je bezpośrednio w odpowiednich grupach tras.
Wszystkie pozostałe elementy — komponenty UI, hooki, logika biznesowa, stałe czy narzędzia — powinny znajdować się poza folderem app/. Warto uporządkować je w osobnych katalogach takich jak components/, hooks/, utils/ czy services/. Dzięki temu kod pozostaje czytelny i łatwy do testowania, a ryzyko przypadkowego potraktowania komponentu jako trasy znika.
W projektach, które korzystają z klasycznego podziału na src/, można przenieść całą strukturę app/ do src/app/. Expo Router wspiera ten układ i traktuje go tak samo jak główny folder aplikacji. To szczególnie przydatne, jeśli chcesz utrzymać jeden spójny punkt wejścia dla całego kodu źródłowego i lepiej oddzielić go od plików konfiguracyjnych.
Przykład praktycznej struktury projektu:
src/
├── app/
│ ├── _layout.tsx
│ ├── (auth)/
│ │ ├── login.tsx
│ │ └── register.tsx
│ ├── (tabs)/
│ │ ├── _layout.tsx
│ │ ├── index.tsx
│ │ └── profile.tsx
│ └── +not-found.tsx
│
├── components/
│ ├── Button.tsx
│ └── Header.tsx
│
├── hooks/
│ └── useAuth.ts
│
├── utils/
│ └── validators.ts
│
└── services/
└── api.ts
Expo Router i React Navigation to dwa różne podejścia do tego samego celu: zarządzania nawigacją w aplikacjach React Native. Choć oba narzędzia pochodzą z tego samego ekosystemu i są ze sobą technologicznie powiązane, różnią się filozofią, ergonomią pracy i zakresem kontroli.
Główna różnica tkwi w sposobie definiowania tras. React Navigation opiera się na manualnym podejściu: tworzysz stosy, zakładki i ekrany poprzez komponenty konfigurowane w kodzie. To podejście daje dużą elastyczność i precyzję, ale może wymagać sporej ilości boilerplate’u — szczególnie w większych projektach. Expo Router wprowadza znane z webu podejście oparte na strukturze plików. Każdy plik w katalogu app/ automatycznie staje się trasą, a cała nawigacja wynika z hierarchii folderów. Pod względem wydajności oba rozwiązania są bardzo zbliżone — oba korzystają z tych samych niskopoziomowych komponentów nawigacyjnych, dlatego różnice w działaniu aplikacji są praktycznie niezauważalne. Warto jednak zaznaczyć, że Expo Router automatyzuje wiele rzeczy, co może znacznie przyspieszyć prace zespołu — zwłaszcza na etapie prototypowania i rozwoju MVP.
Jeśli chodzi o dokumentację, społeczność i dostępne materiały — oba narzędzia są świetnie udokumentowane i posiadają aktywne społeczności. React Navigation ma nieco większe zaplecze, co wynika z jego dłuższej obecności na rynku, ale Expo Router nadrabia to szybko dzięki integracji z całym ekosystemem Expo. Wybór pomiędzy tymi narzędziami zależy głównie od typu projektu i preferencji zespołu. Deweloperzy webowi docenią Expo Router za znajomą strukturę i szybki onboarding. Z kolei zespoły mobilne, które potrzebują pełnej kontroli nad zachowaniem nawigacji i korzystają z niestandardowych scenariuszy, mogą pozostać przy React Navigation.
Podsumowanie porównania:
| Cecha | Expo Router | React Navigation |
| Logika nawigacji | Routing oparty na strukturze plików | Konfiguracja stosów i ekranów w kodzie |
| Web support | Wbudowany, z uniwersalnym deep linking | Obsługiwany, ale wymaga konfiguracji |
| Elastyczność | Mniej kodu, ale struktura narzuca pewne ramy | Więcej kontroli i pełna elastyczność |
| Wydajność | Zbliżona do natywnej, lazy loading tras | Zbliżona do natywnej |
| Społeczność | Rosnąca, zintegrowana z Expo | Bardzo duża, szerokie wsparcie społeczności |
| Krzywa uczenia się | Bardziej intuicyjna dla web developerów | Bardziej naturalna dla doświadczonych developerów mobilnych |
| Integracja z Expo | Ścisła integracja, działa od razu | Może wymagać dodatkowej konfiguracji (np. stacki, linki, web) |
1. Uzależnienie od ekosystemu Expo
Expo Router działa wyłącznie w ramach środowiska Expo. Nie można go używać w projektach opartych na czystym React Native CLI, co ogranicza jego zastosowanie w bardziej niestandardowych lub natywnie skonfigurowanych projektach. Jeśli potrzebujesz pełnej kontroli nad konfiguracją buildów, kodem natywnym czy zewnętrznymi systemami CI/CD, ta zależność może być barierą. Tutaj zapraszamy do naszego artykułu „Jak zacząć projekt w React Native – Expo czy React Native CLI?”
2. Ograniczona elastyczność przy złożonych strukturach nawigacji
File-based routing sprawdza się świetnie w większości przypadków, ale przy bardzo rozbudowanych aplikacjach, które mają nietypową hierarchię ekranów, warunkową logikę nawigacji czy niestandardowe przejścia między widokami, może wymagać obejść lub dodatkowej konfiguracji. To, co w React Navigation konfiguruje się w kodzie, tutaj trzeba „zmieścić” w strukturze folderów.
3. Mniej naturalne podejście dla mobilnych developerów
Dla programistów z doświadczeniem w natywnym rozwoju aplikacji mobilnych, którzy są przyzwyczajeni do stacków i jawnie konfigurowanej nawigacji, podejście Expo Routera może wydawać się zbyt automatyczne lub narzucające. To może wydłużyć czas adaptacji i utrudnić migrację starszych projektów.
4. Młodszy ekosystem i mniej wzorców produkcyjnych
Choć Expo Router rozwija się bardzo dynamicznie, jego ekosystem jest nadal młodszy niż ten wokół React Navigation. Oznacza to mniej przykładów „z życia”, mniejszą liczbę gotowych integracji, mniej szablonów i potencjalnie mniej materiałów dla zespołów o bardziej zaawansowanych potrzebach.
5. Ograniczenia w personalizacji przejść i animacji
W porównaniu do ręcznej konfiguracji w React Navigation, Expo Router daje mniej kontroli nad niestandardowymi animacjami, przejściami między ekranami i stackami modalnymi. Choć można sięgać po niskopoziomowe API React Navigation, często wymaga to mieszania stylów, co komplikuje kod.
Expo Router to jedno z najciekawszych narzędzi, jakie pojawiło się w ostatnich latach w ekosystemie React Native. Łączy prostotę znaną z frameworków webowych z mocą i elastycznością natywnego rozwoju mobilnego. Dzięki podejściu opartemu na strukturze plików, automatycznej obsłudze deep linków i natywnej integracji z Expo, znacząco skraca czas potrzebny na budowę aplikacji działającej równocześnie na Androidzie, iOS i webie.
To rozwiązanie sprawdzi się świetnie zarówno w przypadku MVP i mniejszych projektów, jak i w skalowalnych aplikacjach firmowych — pod warunkiem, że zespół akceptuje ścisłą integrację z ekosystemem Expo. Jego krótka krzywa uczenia się czyni go idealnym narzędziem dla frontendowców wchodzących w świat aplikacji mobilnych, ale też atrakcyjną alternatywą dla mobilnych zespołów, które chcą przyspieszyć development i uprościć zarządzanie kodem.
Expo Router nie rozwiązuje wszystkich problemów, ale bardzo skutecznie eliminuje te najczęstsze — zbędną konfigurację, powtarzalny kod i złożoną obsługę nawigacji. Jeśli cenisz sobie spójność, czytelność i szybkość działania — to narzędzie może okazać się jednym z najlepszych wyborów w Twoim kolejnym projekcie.
1. Czy mogę używać Expo Router poza środowiskiem Expo?
Nie. Expo Router działa wyłącznie w projektach opartych na Expo i nie jest kompatybilny z czystym React Native CLI.
2. Czy Expo Router zastępuje React Navigation?
Nie do końca. Expo Router jest zbudowany na bazie React Navigation i automatyzuje jego konfigurację, ale nie wyklucza jego użycia — można nadal korzystać z jego API.
3. Czy muszę znać React Navigation, żeby korzystać z Expo Routera?
Nie jest to wymagane, ale znajomość React Navigation może pomóc w bardziej zaawansowanych scenariuszach i personalizacji nawigacji.
4. Czy Expo Router obsługuje aplikacje webowe?
Tak. Expo Router obsługuje uniwersalny routing, działający zarówno na Androidzie i iOS, jak i w przeglądarce (Web).
5. Jak wygląda migracja z React Navigation do Expo Routera?
Migracja wymaga przeorganizowania struktury projektu (routing do app/), ale nie zawsze oznacza konieczność przepisywania logiki — wiele komponentów można ponownie wykorzystać.
