Navigation with Expo Router
Set up Expo Router for file-based navigation with typed routes and deep linking.
Navigation with Expo Router is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Expo Router?
Expo Router is a file-based routing library for React Native (built on React Navigation). Like Next.js App Router, the file structure defines your navigation routes.
Installation
Create a new Expo project with Expo Router pre-configured.
# 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-screensFile-Based Routes
Files in the app/ directory automatically become routes. index.tsx is the root, [id].tsx is a dynamic segment.
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)Root Layout
The root _layout.tsx wraps all screens with providers and defines the top-level navigator.
// 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>
);
}Navigating with Link
Use the Link component from expo-router for declarative navigation — similar to next/link.
import { Link } from 'expo-router';
function HomeScreen() {
return (
<Link href="/profile">Go to Profile</Link>
);
}Navigating with useRouter
Use useRouter() for imperative navigation — push, replace, or go back programmatically.
import { useRouter } from 'expo-router';
function LoginForm() {
const router = useRouter();
async function handleLogin() {
await login();
router.replace('/dashboard');
}
}Dynamic Routes
Access route params with useLocalSearchParams() in a dynamic route file.
// app/posts/[id].tsx
import { useLocalSearchParams } from 'expo-router';
export default function PostScreen() {
const { id } = useLocalSearchParams<{ id: string }>();
return <PostDetail postId={id} />;
}Tab Navigation
Use Tabs from expo-router inside a group layout for bottom tab navigation.
// 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>
);
}Modal Screens
Present a screen as a modal by setting presentation: 'modal' in the Stack.Screen options.
// app/_layout.tsx
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Settings' }} />
// Navigate to modal:
router.push('/modal');Deep Linking
Expo Router automatically handles deep links. Define your URL scheme in app.json and links like myapp://posts/123 open the correct screen.
// app.json
{
"expo": {
"scheme": "myapp"
}
}Authentication Pattern
Use a root layout that conditionally renders auth screens or the app tabs based on auth state.
// app/_layout.tsx
import { Redirect } from 'expo-router';
function RootLayout() {
const { user } = useAuth();
if (!user) return <Redirect href="/login" />;
return <Stack />;
}Quick Check
Which Expo Router hook reads dynamic route parameters like the id in /posts/[id]?
Recap
Expo Router uses file-based routing: app/index.tsx → home, app/[id].tsx → dynamic. Define layouts in _layout.tsx, navigate with Link or useRouter(), and read params with useLocalSearchParams().
Frequently asked questions
Is the “Navigation with Expo Router” lesson free?
Yes — the full text of “Navigation with Expo Router” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Navigation with Expo Router”?
Set up Expo Router for file-based navigation with typed routes and deep linking. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Navigation with Expo Router” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.