Mastering Expo Router: The Future of File-Based Navigation in React Native 🚀

Learn how the latest version of Expo Router simplifies navigation with file-based routing in React Native — complete with examples & best practices!

The Future of File-Based Navigation in React Native

The Ultimate Guide to Expo Router (Latest Version)

🚀 Introduction: Why Expo Router?

Navigation in React Native has always been a challenge. Complex navigation stacks, deep linking issues, and manual configurations made it frustrating. But with the latest Expo Router, inspired by Next.js-style file-based routing, things just got WAY EASIER!

💡 What’s new in Expo Router?
✔️ File-based routing (like Next.js!)
✔️ Automatic deep linking & dynamic routes
✔️ No more navigation boilerplate!
✔️ Works seamlessly with Expo & React Native

In this guide, we’ll explore how Expo Router’s latest version works and how you can implement it in your React Native apps with examples.

📌 Getting Started: Installing Expo Router

First, make sure you have the latest Expo SDK installed. If not, install it:

npm install -g expo-cli

Now, create a new project and install the Expo Router package:

npx create-expo-app my-app
cd my-app
npm install expo-router

After installation, add the router provider in your app/_layout.tsx file:

import { Stack } from "expo-router";

export default function Layout() {
  return <Stack />;
}

That’s it! You’re now ready to start building file-based navigation. 🚀

📌 Understanding File-Based Routing in Expo Router

Expo Router follows a folder-based navigation system just like Next.js.

📂 Project Structure:

📦 my-app
 ┣ 📂 app
 ┃ ┣ 📜 index.tsx  --> Home Screen
 ┃ ┣ 📜 about.tsx  --> About Screen
 ┃ ┣ 📂 dashboard
 ┃ ┃ ┣ 📜 index.tsx  --> Dashboard Home
 ┃ ┃ ┣ 📜 settings.tsx  --> Dashboard Settings
 ┃ ┣ 📜 _layout.tsx  --> Layout Wrapper
 ┣ 📜 package.json

🛠 Example: Creating Screens

✔️ Home Screen (app/index.tsx)

import { View, Text } from "react-native";

export default function HomeScreen() {
  return (
    <View>
      <Text>Welcome to Expo Router Navigation!</Text>
    </View>
  );
}

✔️ About Screen (app/about.tsx)

import { View, Text } from "react-native";

export default function AboutScreen() {
  return (
    <View>
      <Text>About Page</Text>
    </View>
  );
}

🔗 Navigation automatically works! No need to set up react-navigation manually!

📌 Dynamic Routes & Parameters in Expo Router

Want to handle dynamic URLs like /profile/:id? Just create a file with square brackets inside your app folder!

✔️ Create app/profile/[id].tsx

import { useLocalSearchParams } from "expo-router";
import { View, Text } from "react-native";

export default function ProfileScreen() {
  const { id } = useLocalSearchParams();
  return (
    <View>
      <Text>Profile ID: {id}</Text>
    </View>
  );
}

Now, when you visit /profile/123, it will show:

Profile ID: 123

🚀 This makes dynamic routing effortless!

📌 Nested Navigation & Layouts

Expo Router allows nested navigation easily using _layout.tsx.

✔️ Example:

📂 app/dashboard

📂 dashboard
 ┣ 📜 _layout.tsx  --> Layout for dashboard pages
 ┣ 📜 index.tsx  --> Dashboard Home
 ┣ 📜 settings.tsx  --> Dashboard Settings

✔️ app/dashboard/_layout.tsx (Shared Layout)

import { Stack } from "expo-router";

export default function DashboardLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Dashboard" }} />
      <Stack.Screen name="settings" options={{ title: "Settings" }} />
    </Stack>
  );
}

Now, all pages inside /dashboard follow this structure!

📌 Deep Linking & Authentication with Expo Router

Deep Linking

Expo Router automatically supports deep linking without extra setup!

exp://exp.host/@your-username/my-app/dashboard/settings

Authentication & Protected Routes

Want to protect a page? Add middleware in _layout.tsx.

import { Redirect } from "expo-router";

export default function Layout() {
  const isAuthenticated = false; // Example authentication check
  if (!isAuthenticated) {
    return <Redirect href="/login" />;
  }
  return <Stack />;
}

✅ Users who aren’t logged in will be redirected to /login.

📌 Final Thoughts: Why Expo Router is the Future?

🚀 Expo Router makes navigation effortless.
🔹 No manual navigation config
🔹 Fully supports deep linking & authentication
🔹 Works out-of-the-box with React Native

📌 Want to learn more? Check out the official Expo Router docs: https://expo.github.io/router/docs

🔗 Follow me on LinkedIn for more insights!

Auther : Prasad Ranjan
ehttps://www.linkedin.com/in/prasadranjane32