Mastering Navigation with Expo Router: A Complete Guide

In current scenario, the mobile apps have become heartbeat to your business, whether you’re building a small utility app or a large-scale enterprise application, navigation plays a critical role in user experience. When it comes to choosing navigation mechanism, it is crucial to have a detailed brainstorming before selecting one. Expo Router, built on top of React Navigation and optimized for Expo, offers a powerful approach to managing routes, especially with its support for file-based routing.

Let’s deep dive in details of Expo Router.

What is Expo Router?

Expo Router provides file-based routing mechanism for Expo and React Native apps. This is heavily inspired from Next.js. It removes the necessity of manually registering screens and offers built-in support for:

• ✅ Nested routes
• ✅ Layouts
• ✅ Modals
• ✅ Route groups
• ✅ Deep linking

Why Choose File-Based Routing?

Instead of using regular navigation mechanism, file-based routing simplifies navigation by using the file and folder structure of your app to determine routes. Instead of manually setting up a stack or tab navigator in the file, you can just create files like:

/app
└── index.tsx              →  /
└── about.tsx              →  /about
└── blog/[id].tsx          →  /blog/:id
└── settings/profile.tsx   →  /settings/profile

With this approach, one can have simple file structure, less code for navigation and it’s easier to maintain as well.

Benefits of Expo Router:

• ⚙️ Zero configuration routing (file-based)
• 👓 Improved readability (for new ones as well!)
• ⚡ Faster development (due to less code)

Getting Started with Expo Router

To set up Expo Router, you can start a new project using this command:
npx create-expo-app@latest

Understanding Dynamic & Nested Routes

🔁 Dynamic Routes

You can use [ ] square brackets to pass value with router, this will be received by the component:

// pages/blog/[slug].tsx
const BlogPost = () => {
  const { slug } = useLocalSearchParams();
  return <Text>Viewing post: {slug}</Text>;
};

🧬 Nested Routes

Nested routes can be created by creating a sub-directory inside `app` directory:

/app
└── settings/
    ├── index.tsx          →  /settings
    └── notifications.tsx  →  /settings/notifications

Using Layouts and Route Groups

Expo Router introduces layouts, a powerful concept for applying shared UI (like headers or tabs) across screens in that Stack:

// app/_layout.tsx
export default function Layout() {
  return <Stack />;
}

You can also use route groups (with parentheses) to organize your code without affecting the URL path, This will group your routes, but that (auth) does not get included in path unless you create `_layout.tsx` file inside that directory:

/app
└── (auth)/
    ├── login.tsx
    └── register.tsx

These groupings are ignored in the final URL, making them perfect for separating public and private routes.

Rich Navigation Hooks

Expo Router comes with hooks that make navigation a breeze:

• 🔗 useRouter() – Programmatic navigation
• 📍 useLocalSearchParams() – Access route params
• 🧱 useSegments() – Work with segmented routes
• 🔄 useNavigation() – Access screen navigation props

🔗 All the hooks and usage description can be found here.

Best Practices for Scalable Navigation

To keep the routing clean and maintainable:

• 📁 Keep your folder structure organized (group by feature or domain)
• 🧩 Use route groups to separate concerns
• 🪜 Avoid deep nesting unless necessary
• ♻️ Use layouts to reduce duplicate code
• 🏷️ Name routes meaningfully

Shopping App File Structure Example

For a basic shopping app, the file structure should be like this:

/app
└── index.tsx                → Home Screen
└── (auth)/
    └── login.tsx           → /login
└── products/
    ├── index.tsx           → /products
    └── [productId].tsx     → /products/:productId
└── cart.tsx                → /cart

Expo Router is rich library and have lots of flexibility which can be achieved by using its configurations. The complete details can be access on the official page.