Page and Dynamic Routing in Expo with expo-router

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

This article assumes a basic Expo project exists. For setup, see creating an Expo project on Windows or Mac.

Routing in Expo 🔗

Expo Router is a file-based router for React Native and web applications.

It manages navigation between screens so users can move seamlessly across the UI with the same components on Android, iOS, and the web.

Adding a file to the App directory automatically creates a navigation route.

We will explore its page and dynamic routing features.

1. Creating pages 🔗

A file in the app directory automatically becomes a route.

For example, these files create the following paths.

📦 app
 ┣ 📜 index.tsx  ->  '/'
 ┣ 📜 home.tsx		->  '/home'
 ┣ 📂 setting		
 ┗ ┗ 📜 index.tsx		-> '/setting'

Here, index.tsx defines the root route and home.tsx defines /home.

Use the routes as follows.

/app/index.tsx

import { router } from 'expo-router';
import { Button } from 'react-native';
 
export default function Index() {
 
	return (
		<>
			<Button
				title="Go to Home"
				onPress={() => router.push('/home')}
			/>
			<Button
				title="Go to Setting"
				onPress={() => router.push('/setting')}
			/>
		</>
	);
}

2. Configuring layouts 🔗

A directory's layout file defines shared UI such as headers and tab bars that persists between routes.

A new project's app directory includes a root layout, app/_layout, defining the layout for all routes.

Use a layout as follows.

📦app
 ┣ 📜 _layout.tsx  -> 루트 레이아웃
 ┣ 📜 index.tsx
 ┣ 📜 home.tsx
 ┣ 📂 setting		
 ┗ ┗ 📜 index.tsx   -> /setting에 적용되는 레이아웃

3. Grouping routes 🔗

Route groups collect routes that should share a layout.

Use a parenthesized folder name, (그룹명), meaning group name.

Groups created this way

do not affect route URLs

📦app
┣ 📜 _layout.tsx
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 setting
┗ ┗ 📜 index.tsx
┗ 📂 (group)  -> 그룹 생성
┗ ┗ 📜 _layout.tsx
┣ ┗ 📜 sitemap.tsx		 	-> '/sitemap'
┗ ┗ 📜 about.tsx			-> '/about'

4. Dynamic routing 🔗

Dynamic routing uses parameters as part of a path without affecting its other segments.

Use square brackets, [], as follows.

📦app
┣ 📜 _layout.tsx
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 user
┗ ┗ 📜 [id].tsx  -> '/user/{id}'

The user/[id].tsx file defines /user/{id}.

Use this route as follows.

/app/index.tsx

import { router } from 'expo-router';
import { Button } from 'react-native';
 
export default function Index() {
 
	return (
		<>
			<Button
				title="Go to User"
				onPress={() => router.push('/user/1')}
			/>
		</>
	);
}

id is the dynamic parameter, available inside user/[id].tsx as id.

/app/user/[id].tsx

import { useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';
 
export default function User() {
  const { id } = useLocalSearchParams();
 
	return (
		<View>
			<Text>{id}</Text>
		</View>
	);
}

Troubleshooting 🔗

Can a folder itself be a dynamic route? 🔗

What we want:

📦app
┣ 📜 _layout.tsx
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 [id]
┣ ┣ 📜 mypage.tsx  -> '/{id}/mypage'
┗ ┗ 📜 edit.tsx  -> '/{id}/edit'

Yes, dynamic routing also applies to folders.

Use [] in the folder name.

/app/[id]/mypage.tsx

import { useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';
 
export default function MyPage() {
	const { id } = useLocalSearchParams<{ id: string }>();
	return (
		<View>
			<Text>{id}</Text>
		</View>
	);
}

Conclusion 🔗

Expo's routing resembles Next.js App Router while offering a range of features.

It manages screen navigation so the same components can support smooth transitions across Android, iOS, and the web.

Further ideas 🔗

Platform-specific routing:
- Expo Router 3.5.x and later support different routes for iOS, Android, and web.
- Platform-specific extensions↗

References 🔗

Page and Dynamic Routing in Expo with expo-router | PromleeBlog