We are using Expo Router to handle navigation.

This is the best navigation solution for React Native i think.

Deeplinks are automatically handled.

​
Quick Start

You probably confused with index.tsx and app/_layout.tsx.

​
Understanding URLs in Expo Router

When working with Expo Router, it’s important to understand how file paths are converted to URLs. Here’s how it works:

​
URL Conversion Rules

1

Get the File Path

Right click on your file and choose “copy relative path”. You’ll see something like:

app/(tabs)/(home)/index.tsx
2

Remove app Directory

Remove ‘app’ since it’s not part of the URL:

app/(tabs)/(home)/index.tsx -> (tabs)/(home)/index.tsx
3

Remove Group Indicators

Remove any routes with () since they’re just used for grouping and not part of the URL:

(tabs)/(home)/index.tsx -> /index.tsx
4

Replace index

Replace any filenames called ‘index’ with / because that’s not part of the URL:

/index.tsx -> /

​
Examples

Here are some common examples of how file paths map to URLs:

  • app/(tabs)/(home)/index.tsx -> /
  • app/(tabs)/(home)/details.tsx -> /details
  • app/(tabs)/carts/index.tsx -> /carts
  • app/(tabs)/carts/checkout.tsx -> /carts/checkout

You can’t have two files end up with the same URL. For example, having both (home)/index and (carts)/index won’t work because they would both resolve to the same URL, which is not possible.

The main thing to keep in mind is that you can’t have two files end up with the same URL. For example, having both (home)/index and (carts)/index won’t work because they would both resolve to the same URL, which is not possible.

Thats it. You are done. Now let’s try to create a new page and test it!

credit: Kadi Kraman (thanks to explanation)

Was this page helpful?

Push NotificationsRedux Toolkit