React-Native: Routing

Lecture notes generated by Aura • 15 June 2026, 02:57 AM • Duration: ~4 min

React-Native: Routing

📋 Overview
This lecture introduces React Native routing using Expo Router, a framework that
simplifies navigation between screens in a React Native app. The core concepts include
creating new pages via file-based routing, using the Link component for navigation, and
styling links for a polished UI. The lecture emphasizes how Expo Router automatically
generates routes based on file names, reducing boilerplate code. Understanding these
principles is critical for building multi-screen apps efficiently, as it enables seamless
navigation and scalable architecture.

🔑 Key Concepts

**Expo Router**
Expo Router is a tool that allows developers to create multi-page React Native apps by
organizing pages into files within the app folder. It automatically maps file names to URL
paths (e.g., [Link] → /about), eliminating the need for manual route configuration.
This approach streamlines development by leveraging file structure for routing logic.

**File-Based Routing**
Each file in the app folder corresponds to a route. For example:

 [Link] → / (homepage)
 [Link] → /about
 [Link] → /contact

This system ensures that adding a new file automatically creates a new route, making app
scaling intuitive.

**Link Component**
The Link component (from Expo Router) replaces HTML <a> tags for navigation. It uses the
href attribute to specify the target route (e.g., href="/about"). Unlike native navigation,
Link handles transitions with built-in animations (e.g., slide transitions) and supports
styling for visual consistency.

**Styling Links**
Links require custom styling to resemble native navigation elements (e.g., underlined text,
hover effects). Styles are applied via the style prop, and consistent styling across all links
ensures a cohesive UI.
**Navigation Flow**
Navigation between pages is bidirectional using Link components. For example, a "Back to
Home" link on the [Link] page navigates to /, while a "About" link on the homepage
navigates to /about. This creates a seamless user experience.

📖 Detailed Notes

**Setting Up Routing**
1. Install Expo Router: The lecture assumes the package is already installed.
2. Create New Pages:

 Add a new file (e.g., [Link]) to the app folder.

 Rename the component to match the file name (e.g., About for [Link]).
 Expo Router automatically generates a route based on the file name.

**Implementing the About Page**

 Component Creation:

// [Link]
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const About = () => {

return (
<View style={[Link]}>
<Text style={[Link]}>About Page</Text>
</View>
);
};

export default About;

 Styling: Copy styles from the homepage (e.g., [Link], [Link]) to

maintain consistency.

**Adding Navigation Links**

3. Import Link:

import { Link } from 'expo-router';

4. Use Link in Templates:

 Add a Link component with an href to navigate to another page:

<Link href="/about" className="link">About Page</Link>

 For the homepage, add a "Back to Home" link on the [Link] page:

<Link href="/" className="link">Back to Home</Link>

**Styling Links**
 Custom Styles: Define a [Link] object with properties like
borderBottomWidth, color, and padding to make links visually distinct.
 Apply Styles: Use the style prop in Link components to apply the custom styles.

**Adding a Contact Page**

 Duplicate Existing Code: Copy the About component and rename it to Contact.
 Update Route: Modify the href in the homepage to point to /contact and adjust the
link text to "Contact Page".

**Common Navigation Patterns**

 Bidirectional Navigation: Links on both the homepage and [Link] allow users to
navigate back and forth.
 Auto-Generated Routes: No manual configuration is needed; routes are derived from
file names.

💡 Examples & Applications

**Example 1: Homepage to About Page**

 Homepage Link:

<Link href="/about" className="link">About Page</Link>

 About Page Back Link:

<Link href="/" className="link">Back to Home</Link>

**Example 2: Contact Page**

 Contact Page Component:

// [Link]
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Contact = () => {

return (
<View style={[Link]}>
<Text style={[Link]}>Contact Page</Text>
</View>
);
};

export default Contact;

 Homepage Contact Link:

<Link href="/contact" className="link">Contact Page</Link>

**Real-World Application**
A multi-screen app like a portfolio website could use this structure:

 Homepage: /
 About: /about
 Projects: /projects
 Contact: /contact

⚠️Common Pitfalls & Clarifications

**1. Confusing File Names with Routes**

 Issue: If a file is named [Link], the route is /profile, not /[Link].
 Fix: Always use the file name (without .jsx) as the route path.

**2. Missing Component Renaming**

 Issue: Forgetting to rename the component (e.g., about instead of About) causes
errors.
 Fix: Ensure the component name matches the file name (e.g., About for [Link]).

**3. Incorrect `href` Values**

 Issue: Using href="/index" instead of / for the homepage.
 Fix: The homepage route is always /, not /index.

**4. Styling Inconsistencies**

 Issue: Links may look out of place if styles are not applied uniformly.
 Fix: Use a shared [Link] object for all links.

📝 Summary
 Expo Router maps file names to routes (e.g., [Link] → /about).
 Use the Link component for navigation with href attributes.
 Style links consistently using a shared [Link] object.
 Add new pages by creating files in the app folder.
 Navigation is bidirectional via Link components.
 The homepage route is always /, not /index.
 Expo Router handles animations and transitions automatically.

❓ Practice Questions

**Easy Recall**
5. What package enables routing in React Native with Expo?
6. How does Expo Router generate routes?
7. What component is used for navigation in Expo Router?

**Conceptual**
8. Why is file-based routing beneficial for large apps?
9. How does the Link component differ from HTML <a> tags?
10. What is the purpose of the [Link] object?

**Hard Application**
11. Design a navigation flow for a "Settings" page with a back button.
12. Explain how to style links to match a dark theme.

**Answers**
13. Expo Router.
14. Expo Router maps file names to routes (e.g., [Link] → /about).
15. Link component.
16. File-based routing scales easily as new pages are added without manual configuration.
17. Link handles native transitions and animations, while HTML <a> tags are for web.
18. [Link] ensures consistent styling across all links (e.g., colors, borders).

7.

// [Link]
import { Link } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';

const Settings = () => {

return (
<View style={[Link]}>
<Text style={[Link]}>Settings</Text>
<Link href="/" className="link">Back to Home</Link>
</View>
);
};

export default Settings;

8.

/* [Link] */
const styles = [Link]({
link: {
color: '#ffffff',
borderBottomWidth: 1,
borderColor: '#ffffff',
paddingVertical: 5,
},
});
Captured Slides & Board
Screen at 00:00

Screen at 00:20
Screen at 00:40

Screen at 01:00

Screen at 02:41
Screen at 04:21
Appendix: Raw Transcript
I can teach you code in Python in just 30 days even if you even if you've never written a single line of code
before. How? Simple. In mice. Simple in my 30 Ok then gang, so now we know the basics of components and
styling. and styling, I want to start adding some extra pages or screens if you like. or screens if you like to this
application. So right now, we just have this one. Now we just have this one homepage screen, but the whole
reason that we installed the that we installed the Expo router package and we want to use that is so we can
easily is so we can easily add more pages and the way we do that is just by adding more files to this app folder.
more files to this app folder, like the index one, where each file that we make represents represents a different
page in the application. For example, imagine we want to make an about page for... want to make an about page
for the app which outlines a bit of information about the app. Well, to do that, we could just make it... Well, to do
that, we could just make a new component file called about JSX. And then in... And then inside this file, we could
by the play a new react native component by typing to component by typing that snippet again, and FES, and
then pressing top. and then pressing top. And then I'm just going to rename this component to have a capital A
at the beginning. at the beginning. And that's all we need to do, because under the hood, the Expo Router will
now make a Router automatically... now make a route automatically for this page, which matches the file path in
name. file path in name. In this case, the route will just be forward slash about because the about because the file
name is about. The wrap path for the index page by the way though would just be for by the way, though, would
just be forward slash, not forward slash index, but for any other file that we make, the expo around the package.
we make, the expo router package generates a route to match the name of that file. So we'll make more pictures
shortly but before we... We'll make more pages short, but before we do that, let's just flush out this new about
page component, so I'm going to keep this really simple, we're just gonna I'm going to keep this really simple.
We're just going to change the text to be about page, and then I also want some style for this. want some styles
for this. So they're going to be very similar to the homepage. Let's grab these ones right here, just a control seat
for that, and then I'm going to paste it. see for that. And then I'm going to paste it in over here. So you have a
contain the title. We can find the containers down to the views or say so. contain a stout of views, or say stout is
equal to [Link], like so. And then also text. And then also text has a style, so style is equal to styles, not
what was it called. What was it called? Title? You like to spell it? You can't. Okay. So. Okay, sorry. Okay, so now
we've got two pages for the application but how do we get from one page to another? we get from one page to
another, for example, how could we navigate from the home page to the Now, we could use the link component
to link from one page to another and this would be equivalent to And this would be equivalent to the other
attack in HTML. Now, the link component doesn't come from react native itself this time. from react native itself
this time and instead it comes from the expo or outer package that we installed. So we can import that. So we
can import that by saying up here on homepage, imports and then curly braces and we and then curly braces
and we want to import the link component and that comes from the the expo router package. And once we've
done that, we can use this link component down inside the template. So let's do that. inside the template. So
let's do that. Let's add a link right at the bottom of the view and the link text is and the link text is going to just be
about page. Now just like an anchor tag, we can add an href value. We can add an href value to this link
component, which will just be a plain string path value to the page we want to link to. to the page you want to
link to. So I said before that the expo router automatically generates those route paths. generate those route
paths based on the file names of our pages. And that means that the route for the bad page is just going to be for
your bad page is just going to be forward slash about which is matching the family, right? So we can use that
right here. So we can use that right here and if we say this file now we can see that the link is over here and
when we here and when we press it we should be directed to the webpage. Awesome and we've also got that
And we've also got that nice slide animation automatically from one page to the next, however. to the next.
However, now we've got no way to get back to the whole page, so let's go and add a link to the... Let's go now to
link to the About page component which navigates us back. So then let's come over here and let's... come over
here and let's come down to the bottom of this page and where we'll do a link like so now if I click on So now, if I
click on this, it's going to be an auto-twin imported form. It's from the X-Ball Router, so I'll do that. And for the
text... And for the text I will say back home and for the href. We said it was just forward slash not forward slash
index when it's the index page is just forward the index page is just forward slash. So if I save this now, we
should see the back home link right there. And if I click on that on the phone. right there, and if I click on that on
the phone, yep, we go back to the homepage, and we can link between these now. Now, I also just want to make
these. Now I also just want to make these links look more like links. So let me come down here here. And I'm
going to paste in a link style. So it's called link. We have matching matching vertical and border bottom width. So
just give it a little border. And now we need to apply this we need to apply the style, prop to this and reference
styles, but link and I'm going to do the same but link, and I'm going to do the same thing for the homepage, so
let's paste in this file for Let's paste in the file first of all the rule and then we'll come over here and say style is
equal to is equal to [Link], and then we can save it. then we can save it. Alright, and that looks a little bit
better now. So let's just try the other one. I'm going to click on this and click on this and oops there we go yeah
that looks bit as well alright so let's try adding one more pad over here inside adding one more page over here
inside the app folder. So we'll call this [Link]. And... And inside here, I'm actually just going to go to the
About page and we copy all that and copy all that and I'm going to paste it in here because it's going to be
virtually the same. contact page instead and then also this and this one here we can change to We can change to
contact as well so everything else is gonna be the same but still gonna have this link We're still going to have this
link back to home. So that goes to forward slash the styles are all the same now. We just need to go same. Now
we just need to go to the homepage and add a link for contact as well. So let's just duplicate this. Let's just
duplicate this change this over here to forward slash contact because that is the route automatically generated
based on automatically generate it based on the file name over here and then we'll change the text inside it to be
contact. to be contact page. All right, I'm going to see that over here on the right. If I click on that, it goes to the
contact page. It goes to the contact page and we can click back home. The back page still works. Yeah, okay cool.
Okay, so OK, so now we've seen how to make extra pages for the application and how to use the link component
to navigate to to use the link components and navigate between us pages. However, this approach to navigation
can be a little bit cumbersome as your application gr- as your application grows to include more normal pages.
It would be nice, for example, to have a little back button in the top left. a little back button in the top left of the
application whenever we navigate to a new page so that we can easily go back to the previous page where or
back to the previous page when we click on that back button, and then we don't have to worry about manually
adding links back to the homepage all the time. links back to the homepage all the time. Unfortunately, Expo
Router gives us a few ways to do that and manage Navi- So we can do that and manage navigation with any app a
little bit more elegantly. Now we're going to take a look at one situation in the next letter. one such way in the
next lesson, and we're also going to touch on layout files as well. Have a real slow... Have you used Claude?