Native Routing Reimagined With Expo Router
File-based routing is a common web development technique that maps a URL path to a specific file in a project directory. This system avoids the complex routing configurations involved with building navigation systems.
With the release of the Expo Router library, file-based routing is possible with React Native applications. Expo Router could be a better navigation system for React Native developers working with Expo.
Navigation Reimagined With Expo Router
The expo router provides a declarative routing solution for React Native Expo apps. This system is considerably different from how you wouldbuild a navigation system using React Navigation. Expo Router cubs major concerns with using the current working navigation system.
These issues include having a navigation system that does not work consistently everywhere, difficulties in managing deep linking, and also complex setups for custom navigation transitions.
The expo router file-based navigation/routing is a simple system that works well and is already familiar among JavaScript developers and JavaScript frameworks likeNext.js, where it’s possible to define routes.
Installing and Setting Up Expo Router
It is fairly simple to migrate your Expo project from the old navigation system to using Expo router.
Step 1: Install the Expo Router
Use this terminal command to run the expo-router installer:
You will also need to ensure you’ve installed these peer dependencies:
If any are missing, you can install them by running:
Step 2: Update the Entry Point
Create a newindex.jsfile to replace your existingApp.jsentry point and set theindex.jsas the app’s entry point insideapp.json:
Step 3: Define a Deep Linking Scheme
Expo Router uses adeep linkscheme to determine which screen or content to open when routing.
Define a deep linking scheme for your app by adding aschemeproperty toapp.json:
Step 4: Final Configuration
The last step is to set up your Expo app’s metro bundler and configure Babel to support Expo Router in your app.
Insidebabel.config.jsmodify the existing code to look like this:
Now rebuild and start your app by running:
Building Your App’s Routes With Expo Router
you could begin to set up a navigation flow within theappfolder. Theindex.jsfile is your starting point. Expo Router adds the path of every file you create insideappto the app’s route system with URL deep links to match each page.
For example, create aSecondScreen.jsfile inside theappdirectory and export a default component:
You could navigate to this screen fromindex.jswith theuseRouter()method:
Here you assign the router to navigation and use it inside the Button element by callingnavigation.push("/second"). The argument within push is the file path of the screen you wish to navigate to.
InsideSecondScreenyou could also navigate to the index screen like this:
The link element takes a href prop to specify the path. Inside app, the"/“path corresponds to the entry file (index.js). The second prop is asChild. This prop allows you to render a first child component with all the specified props instead of the default Link component. you’re able to use this to customize the look of the Link component or to implement custom routing logic.
Defining Dynamic Routes
With Dynamic routes, you can generate routes dynamically based on certain parameters or data. Instead of defining a fixed set of routes, you gain flexibility and adaptability in your app’s navigation.
To start using dynamic routes in Expo Router, you need to define the routes to handle dynamic content. You can use parameterized routes by specifying placeholders within the route’s path. The values for these placeholders will then be available to your route when somebody navigates to it.
For example, consider a blogging app where you want to display individual blog posts. You can define a dynamic route to handle each of the blog posts:
In this example, you define a dynamic route component namedBlogPost. Theroute.paramsobject allows you to access the parameter values passed to the route. In this case, you are accessing apostIdparameter to display the corresponding blog post.
Generating Dynamic Routes
Now that you have a dynamic route defined, you can generate routes dynamically based on data or user input. For instance, if you have a list of blog posts fetched from an API, you can dynamically generate routes for each blog post.
Here’s an example:
In this example, you iterate over theblogPostsarray and render acomponent for each post. When you press a post, thenavigateToBlogPostfunction runs, passing thepostIdto the navigation route.
Handling Dynamic Routes
you may listen to navigation events specific to a dynamic route using theuseFocusEffecthook.
For example:
In this example, theuseFocusEffecthook listens for focus events specific to theBlogPostcomponent. Inside the callback, you can fetch additional data, perform actions, or update the screen based on the focused blog post.
Navigating With Dynamic Routes
To navigate to a dynamic route, you can use the navigation methods provided by Expo Router.
For example, to navigate to theBlogPostcomponent with a specificpostId, you can use thenavigation.navigatemethod:
When you press a blog post, thenavigateToBlogPostfunction will fire with thepostId.
Expo Router Helps You Structure Your Native Apps
The Expo Router provides an excellent solution for managing navigation in your React Native apps. By re-imagining the native routing experience, Expo Router offers flexibility and ease of use.
You have explored the features of Expo Router, delved into basic routing concepts, and discovered how to build dynamic routes. With Expo Router, you can create dynamic navigation flows, handle varying data or user input, and personalize navigation in your app.
Organize your URLs with the React Router library.
Quality apps that don’t cost anything.
I gripped my chair the entire time—and then kept thinking about it when the screen turned off.
The best features aren’t the ones being advertised.
Windows is great, but adding this makes it unstoppable.
Anyone with more than a passing interest in motorsports must see these films.
