What is the Expo Router?

Building mobile apps often involves managing how users navigate between different screens. In the realm of Expo development, the Expo Router emerges as a valuable tool for streamlining this process. This blog post dives into Expo Router, exploring its core functionalities and how it can benefit your development workflow. Whether you're building for Android, iOS, or the Web, Expo Router offers a unified approach to navigation, simplifying development and potentially enhancing the user experience.

‍

Need help with an urgent Expo issue? Want experts on your side to drive forward your project? Need a second opinion on something? Book a free 30-minute consultation today.

‍

What is a router?

‍

In mobile and web apps, routing manages how a user moves between different screens or views within your application. Imagine an app as a series of rooms in a house; routing is like the system of hallways and doors that determines how you move from one room to another.

It allows the developer to give commands like "go to Page B", "go back to page A", "push page C on Page B", etc.

There are various routing libraries (or navigation libraries) for React Native, like "React Native Navigation" and "React Navigation", with the latter being a popular choice amongst the Expo Developers.

But the landscape has now changed with the advent of Expo Router, which is gaining more and more popularity. 

‍

File Based Routing

‍

File-based routing allows us to reflect the file structure of our app screen files to the routes we use in our code to navigate between them.

For example, let's say we have the following screen file structure in our application (index.tsx being the home page the application lands on)

With Expo-Router, we can use navigation links to move between the pages like:

Directly matching the file structure to routing paths.

There is also support for dynamic paths. For example, let’s say we wish to navigate to a product page for a specific product with id = 1234

Then our [id].tsx could obtain the actual param used with

There is also the ability for imperative transition between routes and not just clickable links:

We won’t go into further details here. I urge you to read the official documentation on Expo-Router.

‍

Universal navigation across platforms (Android, iOS, Web).

‍

One of the key strengths of the Expo Router lies in its ability to achieve universal navigation across platforms. This means we can define our entire app's navigation structure once and use it consistently on Android, iOS, and even the Web. This eliminates the need to write and maintain separate navigation code for each platform, saving us significant development time and effort.

Apart from the file-based routing that we saw above, this is also achieved with platform-specific adaptations. Expo Router can leverage platform-specific APIs when necessary. For example, it can utilise the native back button on Android while adhering to swipe gestures for navigation on iOS.

Expo Router provides a set of navigation components that work seamlessly across all platforms, maintaining a familiar look and feel for users regardless of the device they're using. For example, the Link component works seamlessly across native and web platforms.

Expo’s team chose to base the Expo-Router on the already popular “React Navigation” library, which means it leverages the built-in navigation components offered by the latter.

You can still use the Stack.Screen, Tab.Screen, Drawer.Screen and the gestures by React Navigation.

‍

Static Rendering for Web

‍

For the web part, using the Expo-Router, you can render your application as a static website. So, our route structure will be reflected as a website with folders, subfolders, and HTML pages. This allows better discoverability and web crawling by search engine robots (SEO).

There is even support for pre-building the dynamic routes during build-time with predefined parameters.

So, for example, we can provide the following function in your dynamic route page

Will generate the following static pages:

You can delve into the details of static rending by referring to Expo Documentation:

https://docs.expo.dev/router/reference/static-rendering/

‍

Typed Routes

‍

Expo Router leverages TypeScript to generate type definitions for your routes automatically. This process happens during the development server startup. Expo Router automatically creates the types for the routes based on our routes tree. These types are then used to enforce type safety on various aspects of navigation:

For example, we can use the route in our  Link components like:

But if we use a route that does not exist, Typescript will complain

As a benefit, we also get auto-suggestions from the most popular IDEs and code editors.

At the time of this writing, this feature is still in beta, but you can find all about it in the official documentation:

https://docs.expo.dev/router/reference/typed-routes/

‍

API routes

‍

Expo Router takes the concept of routing to the next level by offering API Routes. API routes are a way to create our API endpoint right beside our client code. We can then deploy these API endpoints to a WinterCG-compliant environment (aka NodeJS, etc.) and be able to serve our clients.

For example, we can create the file (adding the +api declares it as an endpoint)

With 

And then in our client-side code call to this endpoint:

In each endpoint, we can export any of the GET, POST, PUT, PATCH, DELETE, HEAD, and OPTION

This feature is still experimental but shows the direction in which the Expo team wishes to move Expo SDK.

You can find more details on how to use it at:

https://docs.expo.dev/router/reference/api-routes/

‍

Expo-Router v4 (under development)

‍

According to our latest information, the Expo team is planning to integrate React Server Components in version 4. 

React Server Components (RSCs) are a new feature within the React framework that represents a significant shift in how developers build user interfaces. Unlike traditional React components that run entirely on the client side (users' browsers), RSCs can execute and render on the server. This opens up exciting possibilities for performance optimisation, improved SEO, and streamlined development workflows.

‍

Conclusion

‍

The Expo team is making significant strides towards their vision of a truly cross-platform development experience. These advancements are paving the way for exciting possibilities in the future, and we're eager to see how the technology continues to evolve.

‍

Need help with an urgent Expo issue? Want experts on your side to drive forward your project? Need a second opinion on something? Book a free 30-minute consultation today.

‍