CodePath WEB102 Spring 2025 Week 7 - Christina Hughes on Implementing Navigation

Estimated read time: 1:20

Summary

In the latest installment of CodePath's WEB102 course, Christina Hughes delves into the intricacies of implementing navigation in React applications. The session focuses on how to effectively use React Router to transition between different paths in a website, enhancing user experience by introducing multiple pages. Hughes also touches on the practical aspects of building applications professionally, emphasizing the importance of choosing the right APIs and handling feedback during development.

Highlights

Christina Hughes simplifies navigation in React apps with React Router 🚀.
Interactive session with real-time coding examples for route setup 🔧.
Insight into choosing APIs based on real-world feedback ✉️.
A peek into handling rate limits and other common app issues 🔄.
Hands-on guidance on dynamic routing and nested routes 🛠️.
Engaging Q&A session tackling conceptual doubts from attendees 🤔.

Key Takeaways

Learn how to implement navigation in React apps using React Router 🧭.
Explore the difference between single-page and multi-page applications 🌐.
Understand the role of routes and how they define user navigation paths 🛤️.
Grasp the concept of nested routes and how they simplify page management 📂.
Discover the power of dynamic routing with URL parameters 🔄.
Gain insight into handling real-world feedback and development challenges 💼.

Overview

Christina Hughes takes CodePath students on a journey through implementing navigation in React applications, emphasizing the transformation from basic component rendering to more complex routing structures. With a focus on React Router, she explains how paths and routes can be set up to enable a seamless browsing experience.

The session covers both basic and advanced topics, from setting up straightforward routes to implementing nested routes, adding dynamic routing with parameters, and passing props to different route components. Hughes provides real-time code walkthroughs, demonstrating practical implementations and troubleshooting common issues like API rate limits.

Students engage in interactive discussions, exploring different routing methodologies and the importance of user-friendly navigation. The workshop not only enhances students' technical skills but also prepares them for real-world challenges by emphasizing the need for thorough testing, feedback handling, and understanding the impact of design choices in professional app development.

Chapters

00:00 - 00:45: Introduction and Overview The chapter titled 'Introduction and Overview' begins with the speaker addressing potential challenges due to limited screen real estate. They welcome participants to ask questions by coming off mute and indicate they will also pause intermittently to address any queries. The main focus of the chapter is introduced as a discussion on the day's topic, however, the specific topic is not detailed in the provided transcript.
00:46 - 03:00: React Navigation Basics In this chapter, the basics of React Navigation are introduced. It highlights the concept of navigation in React applications, focusing on the idea of switching between different pages or paths within a website. The chapter emphasizes the difference between conditionally rendering components and actual navigation through different paths, as indicated by changes in the URL bar.
03:01 - 05:00: Introduction to React Router The chapter introduces React Router and begins with an example of navigating to a complex path, such as a presentation edit page with a unique ID. The discussion includes a brief reminder about procedures, such as renaming a pod, and poses an engaging question to the audience regarding which daytime TV show they would choose to appear on. The content sets the stage for learning how to work with React Router in detail.
05:01 - 09:00: Setting up React Router This chapter delves into setting up React Router. Despite starting off with a light-hearted conversation about favorite daytime TV shows—which include mentions like soap operas, Jerry Springer, and Friends—the main focus is on questions surrounding React Router setup. Participants are encouraged to share their thoughts and experiences in the chat for a collaborative discussion.
09:01 - 12:00: Using Routes and Components The chapter begins with the instructor engaging the students by asking if it's anyone's birthday. The instructor then initiates a group activity where everyone is encouraged to come off mute and say 'Happy Birthday' to fellow students, Miam and Aisha. Despite the initial hesitation about singing, the group is rallied to participate in a lively birthday greeting.
12:01 - 17:00: Nested Routes The chapter begins with celebratory greetings, followed by weekly reminders aimed at fostering engagement and community. The speaker emphasizes the importance of being present, building community, practicing curiosity, seeking help, and maintaining active participation (such as keeping cameras on). The agenda, although seemingly large, is introduced as interconnected subjects all centered around a single main topic, which will be explored in depth in the session.
17:01 - 20:30: Dynamic Routing and Props The chapter focuses on working with React Router to implement navigation in applications. There is a continuation of lab work, and reassurance is given that any unfinished lab work from last week will be addressed. Feedback indicates a positive response to hands-on learning experiences, which will be increased this time. The chapter also acknowledges past difficulties with lab work that were experienced by many participants.
20:31 - 30:00: Lab Introduction and Setup The chapter introduces a laboratory setup focused on real-world decision-making, particularly in choosing APIs. It emphasizes the importance of recognizing and adapting to issues, acknowledging a problem in the lab instructions due to the evolution of cryptocurrency since its writing, affecting rate limits.
30:01 - 52:30: Lab Session The chapter titled 'Lab Session' discusses the expansion of resources from having only a few coins to now having hundreds, indicating an entry into a new era. This change requires some workarounds to manage effectively. The chapter introduces a project preview consisting of a dashboard view and a detail view, which students are expected to integrate into their ongoing projects initiated the previous week. Additionally, a discussion prompt is introduced, asking students to consider the potential benefits and drawbacks of having multiple pages in a project.
52:31 - 63:00: Wrap-up and Announcements In this chapter titled 'Wrap-up and Announcements', the focus is on discussing the aspects of a web app development process. The conversation touches on various elements such as loading times, complexity, and organization, along with how more content can enhance user experience but also increase the likelihood of errors. The chapter also emphasizes the importance of separation of concerns in development. The speaker thanks the participants for their contributions and hints at upcoming capabilities to enhance the app further.

CodePath WEB102 Spring 2025 Week 7 - Christina Hughes on Implementing Navigation Transcription

00:00 - 00:30 uh okay go ahead and try to hide this i am limited in my screen real estate today so I might not be able to notice some stuff in the chat if you want to say something you're pretty much always welcome to come off mute and ask a question or something like that but I'll pause and ask for uh questions also all right so what are we talking about today so today we're going to be going over
00:30 - 01:00 navigation for your React applications so you may have noticed that up till this point we're not doing any switching between different pages we might be conditionally rendering components and things like that but we haven't yet gotten to the point where we're going navigating through the different paths that can be available in a website and what we mean by path of course if you look at my URL bar here which I think you should be able to see we have docs.google.com google.com and then after this slash and including this slash before we get to our URL params
01:00 - 01:30 that's the path that we've navigated to in this case presentations d bl some long uyu ID or whatever and then edit so um yeah so this is kind of what we're going to learn to work with today so as always quick reminders to go ahead and rename your pod uh rename your yourself with your pod there we go and then Um we have a question today for the chat if anyone if you could be on any daytime TV show which would it be i didn't pick
01:30 - 02:00 this question but it kind of made me laugh cuz like daytime TV show makes me think of a soap opera like being a middle-aged woman or something i don't know but um if you have something that comes to mind drop it in the chat i'm going to try to get this chat pulled up here jerry Springer oh I love it okay the office friends i love that yeah friends would be a good one everybody hates Chris amazing thanks y'all um all right cool i've got one more question just curious
02:00 - 02:30 is it anyone's birthday today i just have this feeling i just want to ask anyone's birthday we're not going to sing don't worry today tomorrow the next day me okay all right miam's birthday Aisha's birthday happy birthday i want every single person to come off mute with me in one moment and say "Happy birthday Miam." or happy birthday Aisha so I'm gonna count to three all right get ready get your buttons ready all right one two
02:30 - 03:00 three happy birthday happy birthday awesome thank you everyone all right cool okay let's get started so let's um we we have these reminders every week i'll just quickly run through them again we're going to stay present we're going to build community practice curiosity ask for help and keep our cameras on um here's today's agenda so this might look like a lot of things but don't worry because really these are all different parts of the same topic that we're going to be going through which is
03:00 - 03:30 working with React Router to implement navigation in your applications um so we'll continue working on the lab also but don't worry if you didn't complete the lab because we have some from last week because we're going to we're going to make that work so um just quick feedback summary um I just chose one thing for each of these from the feedback that stood out to me the glows is hands-on learning as always um going to try to include more of that this time and then the grows from last time i think everyone was struggling with the lab and it wasn't
03:30 - 04:00 your fault um but it's good to recognize that this happens in the real world and in the real world you might make a decision based on which API you want to implement or give your money to based on any struggles that come up so uh it's good to be aware although I do think full transparency it was kind of an issue with our lab instructions based on the fact that since the lab was written a lot more coins have come into play so the lab wasn't hitting those like rate
04:00 - 04:30 limits before because there were only a few coins and now there's like hundreds and so we were kind of hitting into this era so we've got some ways that we can work around that um here's our project preview you're going to notice that you have a dashboard view and a detail view so that's going to be what you're working on this week to add on to your projects that you started last week um and then we have this question this discussion prompt what are some potential benefits and drawback drawbacks of having multiple pages in a
04:30 - 05:00 web app what comes to mind for everyone anything come to mind me get this chat open can you see my chat when I hope it open doesn't matter okay loading time complexity time organization more content enhances user experience but more likely to introduce errors absolutely separation of concerns totally yeah great answers thanks everyone so um exactly we are going to have the ability to introduce a lot more
05:00 - 05:30 information to the user in a way that is manageable for them right we can't have everything on one page always they'll get overwhelmed and it's just not how our brains work so this is why we need React Router um and two uh I just want to quickly acknowledge there are other solutions to this besides React Router um we're going to be starting with this because it's nice and simple we can get going with it without too much friction but you might want to look into other options too for your own projects that you want to explore implementing you
05:30 - 06:00 might prefer their style um React Router has really come a long way in the last several years and they now offer even like a full framework option um which might be more comparable to Nex.js if you're familiar with that today we're going to be focusing on what's called their declarative option which is kind of the simplest case to just get started get our feet wet get some routes in um but yeah look into the framework look into NextJS look into other tools you know it's great to have your own
06:00 - 06:30 opinions from your personal experience with uh with these different things about what what you think is best you'll be asked about that in interviews and things like that so um I can say I've had positive experiences with React Router and and in case it's not clear this is something that will just like hopefully everything else we're going over be super critical in the work that you do professionally because practically speaking most of the almost all the tools you build are are going to have different routes are going to have different paths available to the user so um yeah so let me just did I hit
06:30 - 07:00 everything in this slide yeah so okay so what are we talking about with a route so um earlier I used the term path i'm kind of might use those interchangeably so what we're talking about is this section here um you can see in this case it's organized a little bit like a folder path or a hierarchy of files and folders um that direct us to exactly where we need to go so um I I kind of cross out here that there are two ways as I mentioned React
07:00 - 07:30 routers come a long way there are a lot of ways that you can go about doing this but um to keep it simple to start we might have a route component where this specifies which URL path is available and which component that route should link to um or we can use the use routes hook since we use functional components since that is the modern way to use React we have this available to us as well um okay so how can we get started using React Router as always pretty simple oh and by the way you'll notice
07:30 - 08:00 in the documentation in your course portal for this week that they referenced the package React Router DOM so it looks like this instead of what we have on the slide i think that's kind of left over from when React Router was going through this like transition period um you can use the regular package just keep in mind when you go into your lab that it's always going to say dashdom so it might be a little easier to just use that package instead so that you don't have to like fix that up every time you're pasting but either way it's up to you so as we go through
08:00 - 08:30 our slides this week I'm going to just kind of pop over to our our coding window also I can't use my or I didn't try but I suspect I can't use my tool for um doing demos because the routing as you can imagine is uh something that that tool isn't really designed to handle so I have my um basic V React project here just built like brought this up like two seconds ago um and so
08:30 - 09:00 I first want to just show you that we can do npmi react router oh there we go so that's going to be how we kind of like get started going with this pull that back up okay so okay next we're going to go through again this is sort of the these three uh words here are the names of the different components which are going to
09:00 - 09:30 be relevant for use for getting started with react router so here you can see a little more clearly that these are components and uh this is again what react calls or sorry react router calls declarative mode um and it's kind of the third option in their website if you're looking into their documentation you can reference the declarative mode for what we're going over today so the these are all also by the way kind of nested within each other so the most outside parent element is going to be browser router and that's basically what
09:30 - 10:00 controls the connection between this navigation that the user is doing the different components they're clicking on um and the your URL bar so React Router has other routers available for example like a memory router i've never used any of those other ones uh but the point being like this is a router specifically for um your for the integration with the browser API like the history um API on the browser um okay so then
10:00 - 10:30 next we have routes which is just indicating like here is the list of all the routes which are relevant for this and then we're going to add in each of those specific routes which like I mentioned are where we define the relative path for where we want this to go in the URL um okay so let's let's do an example i'm going to pop over and do this uh real time so um I'm going to pull up my main file here i I like to use this for
10:30 - 11:00 routes but you don't have to do it here um you can use any component really um but you'll see why I think uh it makes the most sense to me in just a moment um and really it like boils down to the fact that you have to like encompass all of the components that you want to be able to navigate to so if I want to be able to navigate to like my app component then I need to kind of go higher than that and
11:00 - 11:30 the place for that would be this main file so I'm just adding as I mentioned earlier the browser router is like the outside um element and then we have routes very simple nothing gets passed to these no props or anything and then we can start defining our routes here so I will add a route for um our maybe our base actually yeah I'll just do base to start and then we specify the element
11:30 - 12:00 that we want to go to in this case I'll use app since I haven't built anything else yet and um that should be it so let's quickly make sure that that rendered and I didn't do anything weird okay it seems to go to the right place so that's good um but now just to make it slightly more interesting we can just show you if I change this path that is going to change so now you can see and I think it's helpful for me to have my console up in this case so
12:00 - 12:30 now you can see we have this error that came up no routes matched location like home or whatever because I didn't have anything there and so um if I switch my navigation bar to app now we have our homepage back up so pretty simple pretty straightforward um let me see I think that's all this slide was really covering we can we can add more options of course that will come into play certainly so if I wanted to make my homepage app
12:30 - 13:00 um and then I wanted to make maybe like an about page that link to another component um we could do that also we just have to make another component um I'm going to call this about page just bear with me for a second while I get this added in does anyone have any questions while I'm um while I'm just adding this baseline component here anyone want to come off mute ask a
13:00 - 13:30 question i'm I'd be happy to answer any if you have any so far i know it's just getting started all right no questions that's good i do have one actually um how can you write a path that would match all paths that you don't already have so that it could act as like a four or four page that's a great question that's a great question and really it's super simple i'll just pop over and show you super quick you're just going to use like a wild card or like the star uh and
13:30 - 14:00 we can use that maybe as our example um so in this case to um and then try to make this oops [Music] quick
14:00 - 14:30 go okay super informative page okay and then explore default about page let's see if that gets us there um not see because of all of the faces let's see if I go here gosh this has so many things on my screen okay uh oh internal interesting okay start this over again
14:30 - 15:00 oh no I got an error oh my gosh i need to hide this okay let's see um import about page doesn't like this fail fail to resolve this i think the import is a little bit wrong i think it says app page instead of about page that is totally right perfect thank you okay cool so um now we should see that we are
15:00 - 15:30 going to so if we go to our homepage right we have a path defined for that right here it's our first route uh if I go to any other page it's going to take me to that about info which isn't obviously what you would want to go to like 404 page like you said but that's how you would do that okay let's continue so um here are a couple of props that we can pass to our route um and you know you'll remember like these are also props so we have our path and element are going to
15:30 - 16:00 be pretty much default included for the most part we can also include this case sensitive um prop i will say I don't use this uh I I'm trying to think when you would maybe like if you needed to give a user like a special link and it was kind of a a complicated URL you were trying to get people not to guess maybe you would want it to be case sensitive browsers do kind of some like caching with the case of a uh of a path and prefers lower case so it can get kind of
16:00 - 16:30 confusing um the like rerouting that's done at the browser level there anyways and then we also have this index prop and so this is going to come into play when we use nested routes which we have another section we're going to go into in a little bit so there's just a little bit more about that um yeah so like I mentioned you don't have to use this in your main file we can include these in other components um
16:30 - 17:00 but you can't this is kind of what I was trying to say earlier you can't refer to the same component that you're defining that route in so if I if I were just using app as kind of my catchall component and routing to everything the user needed to see from there I could I could certainly use app as my routing component okay any other questions about this declarative mode routing that we have gone over so far i'm going to check I had a question
17:00 - 17:30 real quick um so like in the in the slide examples the routes are nested within a browser component and then in your example you have it nested in a create route so like um do do when we're uh creating our routes can we just use them like any other component or do they need to be nested in like these particular
17:30 - 18:00 uh places so that they have access to something yeah so it it's the latter the routes do need to be nested within uh these unless we're go unless you're talking about this use routes although I I will say I didn't really follow so you mentioned in the slides we had this browser router component we also have that here did you see that okay we do okay I see yeah so we we're doing it the same way there are other options but sorry go ahead um it's
18:00 - 18:30 nested in a like a create route is what is what exactly do we need to do that oh so you're I think you're referring to create root here um yeah so we haven't really talked about this much but this is basically the way that React this is like the highest level React file that is initializing your React application so if this is unfamiliar it's just probably because you haven't gone into this main.jsx file but actually like
18:30 - 19:00 every you know React project that you initialize has had this in there and so uh maybe the fact that it says create root makes that a little clearer this isn't related to our routes that we're working on today this is just sort of a separate concept in React for actually like going ahead and calling your root level component um does that help uh yes thank you you're welcome all righty so I think I'll move it along here but we'll have more time for questions later so um next
19:00 - 19:30 we're going to be going into use routes and link um I'll be honest i think these could be two separate topics so if if it's not clear how they how they like interact with one another that's okay um but use routes is a hook that React has available for doing basically exactly what we just did in a slightly different way um so I I think I'll go ahead i was going
19:30 - 20:00 to maybe just skip this one like actually showing it but I think I'll go ahead and and do it um in the interest of completeness you for your lab today though by the way you will be using the model that we just went over so I think it'll be more important to understand that but I think it's helpful to see there are like other ways that you can excuse me um you know go about implementing these routes so um let's see so well did I even okay let me
20:00 - 20:30 see if there's anything want to go over here um okay user code yeah is logically equivalent okay cool so well here's an example in the slide first so basically in this case we are going to be returning from our routing component this result like this whatever is returned from use routes and what we're going to pass to use routes is all of the different paths that we want to implement so I'll I'll do like an
20:30 - 21:00 equivalent um of what what we just did so I'll have to make sure to import user else and you'll notice I switched over to my app component um because in this case the component sort of what's returned from element here or like what what gets put into element here is basically going to replace the routes and the route of our prior components so I actually actually
21:00 - 21:30 I did this wrong i do need to keep the browser router there and then app within that um whoops okay so so in this case we can do let element equal use routes and then here we can basically have a list of objects where the path is for example this and the element is wait no I can't do app
21:30 - 22:00 because I'm in app so I can do um about page let me just see if I can get this going to start so I'll just comment this out this one and then turn element i think this should work so
22:00 - 22:30 in this case oh no it didn't work use routes is not a function okay that's confusing let me see what did I do wrong oh I imported it from the wrong place okay so we actually want to get our real
22:30 - 23:00 user out there we go okay oops so there you go so now we can see in this case I only set my root path to go to the about page so that's what we're seeing here um I can make another page to kind of be able to show you what we're talking about here so maybe we have the about page and we have like a details
23:00 - 23:30 page and so I just need to rename that and this and I want to say so much detailed and colorful and then coming back to app of course we need to um import our new page that we want to route
23:30 - 24:00 to and then we can add another one of these so we can just come in here and maybe we want to say um I don't know details one or whatever and then this can go to a details page there we go all right so that's basically how we can achieve the functional equivalent of the component-based
24:00 - 24:30 uh method or like purely component-based method that we just learned earlier with use routes so um any questions about this i I just this is kind of an aside i just wanted to get you exposed to this but we shouldn't need this in our lab um so is there any benefit to doing this version over um the other version it's a great question i don't know of any um I it might just be a stylistic
24:30 - 25:00 thing i I think maybe they kind of expected people to switch over to this when the functional component change or the class to function component change happened but you can see in React Router's documentation that they refer you to the purely component-based method and you kind of have to dig in in order to find out about use routes so I I don't there might be some advantage that I'm not aware of um but I I I certainly don't know of anything right now so I would I would I would generally steer
25:00 - 25:30 towards the component-based um from my personal experience but you should get you know do do your own research um and may maybe there's something good there that I don't know about and let us know if you find something i have a question yeah what's up i'm sorry so what if the your main jsx uh have a diff uh same path as the the use route and your app.jsx but the element being going to it's different i think I
25:30 - 26:00 see what you're saying so you're saying like what if we had a route here also and it was like same i don't even know i don't even know if this will work let's try it and see what happens i will say don't try not to do that because that's kind of against the paradigm but let's let's see what happens i don't know so uh let's say here well see okay let me see what if we route to the details page from here while we have the root path
26:00 - 26:30 routing to the about page from there let's see who will win oh there's an error okay uh a route is only ever to be used as the child of routes element never rendered directly right i did not add routes so maybe that wasn't really a fair fair game let me add that both of them are rendered
26:30 - 27:00 interesting i guess that makes sense because here we are telling the application to render app regardless right we're not saying we're not using this conditional like routing logic in order to decide what to show so in that case it's rendering app first which is ultimately rendering about page and then here um we as we progress through this we are rendering the details page after this which is exactly what we see so I guess that makes sense i I in general I would say that could maybe cause
27:00 - 27:30 confusion but this kind of does tie into our nested routes uh that we're going to be going into in a little bit i I've never used it that way but I I don't know maybe there's not a good reason not to if you were so inclined so um all right thanks for the question i'm going to go ahead and kind of like switch this back over to just the component base since that's what you're going to be working with in your lab to continue going through the lesson uh what else do I need to do here so
27:30 - 28:00 let's see we've got app there i want to um delete those oops okay so let's go here that's matching our other cases okay so let's continue
28:00 - 28:30 um okay so this is kind of explaining what we just went through but just quickly to kind of keep us up like matching with the slides um as we mentioned this is going to be a functional component thing we've never worked with class-based components in this class so that this is just the regular kind of component we've been exposed to and then uh yes it does need to be in a routing component so we need to have that browser router or you know hypothetically whatever router we're using encompassing the component which
28:30 - 29:00 is ultimately returning the use routes result um so this is what we kind of just saw um in the in the code so links we're going to move on to links now um links are super simple basically this is just going to be a way to navigate us around the application so I will show you what that can look like so okay
29:00 - 29:30 let's say I want to actually have uh maybe another route that's like here we have the details one I think is what I called it for some reason um it says oh page okay so um and let's say I want from my home app to have a link to my details page so I Whoops okay so I can just pull up this app
29:30 - 30:00 component delete this and let's say I just kind of want to delete this and add a here so link is is a component that is available from React Router so I'm going to import it there and all we need to do for a link is say
30:00 - 30:30 where it goes to so let's say I want it to go to details one and then actually does this I can't remember does this get Yeah okay so we do have this um like what we're going to pass the text we're going to pass in here is going to be what's displayed as the link text so I'll just say details in this case and
30:30 - 31:00 so tada there's a link here and when I click it it takes me to the details page pretty simple um does anyone have questions about that so far okay I see a question in the chat and I'll read it out loud what is the difference between using link and route if both can redirect to different components it's a good question essentially link is what renders a visualized link to the
31:00 - 31:30 user you may have noticed with routes there is no visual rendering of or anything that's clickable or anything like that routes are defining the paths that are available under the hood and what's going to be possible to link to so for every link that I make I need to have a matching route available in order for that link to work or it will go to my you know 44 page that I designed but links are how we visually show to the user here here is a button that you can click which will take you to this page
31:30 - 32:00 so I hope that helps um awesome i saw that makes sense okay and you might be wondering I thought I think this is kind of interesting like why can't why why am I not just using like a link like I've been used to using like an a tag and it's just like how to use this uh someone help me out how do I How do I do this href and then the path and then
32:00 - 32:30 Yeah there we go okay so let's add this details one and I'm going to say it i'm going to call it the exact same actually no I'm not okay uh other details very clear okay so here we go and what I want to show you is what happens over here in our network tab whenever we do that so when I click this remember this first one is the link and the second one is the A tag so when I click details I get
32:30 - 33:00 linked to my detailed page and you'll notice oops I have that left from the lab okay let me show you again to be fair okay details there we go no network calls were made so that's that's the main gist of why we need to do that so if I click other details it linked me to where I wanted to go in this case but it was calling the server again to get our whole application reloaded so really this is like a total page refresh
33:00 - 33:30 instead of just utilizing the like single page navigation of react router so that's why we would be wanting to use link instead of uh instead of a um and yeah okay I'm just checking the question um cool all right so back to our slides it's 7:35 okay so we already went over this uh we had
33:30 - 34:00 that good question earlier so we can have a wild card which matches anything in the event that we want to kind of catch the user uh not navigating to a route that's available um it's always a good idea to have this you know I really I'm trying to think of a case when you would not want to do that and I think generally you always want to have this because if you navigate to a route that's not defined and you don't have this then you're just going to get like a blank page and an
34:00 - 34:30 error and we don't ever want that to happen to our users um so okay we had a little quiz here wait you can see the answer i need to stop doing it like this okay so if you have these routes uh where will this link take you any ideas what do we think feel free to come off mute or throw it in the chat it'll take a minute to
34:30 - 35:00 read that's right it'll take you nowhere i guess I guess this was meant to be a trick question i don't know but basically yes it will not be navigating you anywhere because we haven't defined or it'll navigate you like I said to like a blank page in an error because um there is no contact me link and the way these routes are designed that would uh not be captured by any of the routes so we would definitely want to add a another um uh route here to catch all or
35:00 - 35:30 add a link to the contact me page if that was what was originally intended all righty so we just went over use routes and link any other questions about that before we move on to nested routes i don't see any questions okay we'll continue um why do we need a nest route so like you can see up here in the my
35:30 - 36:00 URL here like there's often not just one section to this path right there might be several sections and so what this breathtakingly beautiful picture is trying to tell you is that we have the the case where we don't want the entire page to change based on the path that we're going to in this case what it's trying to show you is that like on the left we have the order details page and on the
36:00 - 36:30 right we have the account details page which are selected from the sidebar A and B and all we want to change really is what's in here in the center of the page this particular component and so how would we go about doing that how would we go about implementing nested routes well here are the two options based on what we've learned so far um I'll go over the one on the right first which is showing you that in this case we have a route element that actually has children
36:30 - 37:00 elements here these two sub one and sub two so in this case the routes that become valid are homesub1 and home/sub2 and you can see that these are going to navigate you to different portions um of the page so and then on the left here we can have kind of these two sub elements and so I'll show you
37:00 - 37:30 exactly kind of how we can go about implementing this um oh yeah this is an important part of it so in this case the home element page one is is just to clarify still going to be rendered and then we'll also have either one of these two rendered as well so the outlet component is how we do that um this would be like in the prior example maybe dropping us into what was it page one like the parent component and the outlet is going
37:30 - 38:00 to basically go ahead and render whatever subpage has been referenced in those child routes if that makes sense um and so okay let's let's jump over to some code and look at it here so um okay so let's say I want um do I have anything returned from my app component right now just this link um I'm just going to add something here to make it a little more clear where we
38:00 - 38:30 are okay so we have our app component which has just a header and links to our details page we have an about page which just has about info and then we have a details page which has very different detailed info so let's say instead of having this here I want to use a net component for it so I'm going to close off this route there and move these two to be in here so you can
38:30 - 39:00 see what I just did was now instead of having three routes in parallel we have one route defined here and then we have two children passed into that and so um in this case I want to change this just for this example to be about um so one thing to kind of keep in mind and maybe to make that more clear um is I'll add this app here so these I mentioned this earlier but just to reiterate these paths are going to be
39:00 - 39:30 like added onto each other so this will be app/details one and app slashabout and so um what else do I need to do does anyone remember what else do I need to do in order to get this to work the way that I'm intending oh well I guess if there's an error let's fix that first okay um I'll just go to up
39:30 - 40:00 here so here I have the app component and the details link which is the app component but what I wanted was to have those one of those other two subcomponents rendered as well what else do I need to do anyone remember we kind of just blasted through it in the slides but out Oh sorry sorry I didn't mean to cut you off go ahead say it no it's okay yeah we have You're exactly right we have to add the the outlet so here's where we're going to do that because this is in our right um and we don't
40:00 - 40:30 have to pass anything here we just have to show it so oh yeah I guess in order to do this example I would have needed to go to like details there you can see the sub component and then about so here you can see kind of how those are all brought together based on the path that we're navigating to and just like to quickly show you what I was trying to show you before like if I if I remove that outlet then this is no longer showing me the about
40:30 - 41:00 info okay so this might be like a little bit trickier than the stuff that we've gone over before um but does anyone have any questions about the nested routes oh I forgot to tell you about the index okay so um we we kind of briefly mentioned that we have this index prop that can be passed in and basically what that oops what that does is it's going to define what is the default component
41:00 - 41:30 that should be shown in the event that I'm not navigated to a sub route so if I set this I mean I I don't have to do this but just to make it clear to true here then when I just navigate to app it should show me not only app but also the details page component because I've defined this to be kind of like what we insert in this outlet portion whenever there's no uh sub sub
41:30 - 42:00 matching like subpath so this now should show me that oh except it doesn't did I save those i did details page actually maybe I just have to not include a path here there we go okay so in this case we have the detailed information being shown also because it's set to our
42:00 - 42:30 index that's kind of like the default you know if you uh are so inclined to add that there okay any questions about this next we're going to be going into dynamic routing and adding props um um what happens Oh sorry um what happens if an outlet needs different props like if the subpages will both take different information is there any way to like give it through
42:30 - 43:00 the outlet component um interesting question i would imagine so so props that aren't used are generally just kind of like left to the wayside you know we don't have any errors introduced from having extra props that aren't being used so in hypothetically I think yes you could
43:00 - 43:30 have you know multiple props pass through and make sure you're only referencing ones that are relevant for that component but to me that feels like a little bit like maybe there's a different implementation that would be available that would be a little more clear from the code what what the intention was if that makes sense so I would like kind of I think you would be able to do that yes and also I would maybe consider should I be rendering um
43:30 - 44:00 or should I be passing that information through in a different way or or something like that but I actually I yeah I think I think it's a good question and you should be able to do that um okay so I have another I have another quick question about um the router so if I tried to deploy this app to the web um would that be client side or would that be server side like how would the routing work in
44:00 - 44:30 that case um so the the routing is client side in this case okay thank you you're welcome i do have a note on that uh which is if you are hosting the website and because it is client side you do have to tell the server to redirect everything back to the root or else it will not find the page on a sub route if you refresh yeah I was asking because I was I was just
44:30 - 45:00 using the router in like a personal project to it's like an article viewer and when I try to load like a specific path on there it doesn't work with the React router i have to like I had to like do some configuration to do that so I wanted to see like why that was happening yeah yeah okay cool was it like an engine X configuration or something like that it's just like it's the same thing it's a V project but it Yeah it's basically the same thing we're doing with the React Rider just you know I ran into that little issue yeah yeah great point to call out thank you yeah
45:00 - 45:30 thank you oops all righty let's move into dynamic routing i'm going to check our schedule really quick to make sure we're like somewhere okay amazing we're actually totally on schedule okay so dynamic routing and adding props what is that so um you might imagine like there are some cases where maybe I have let me kind of switch this back over to not
45:30 - 46:00 nested um there we go so when I added details one here I kind of was wanted to get at the point that like okay maybe there's several different options available that's kind of index based on a number or you can imagine like I want to see the details for product 1 2 3 4 5 or something like that um and so this is basically Oh wait a second am
46:00 - 46:30 I going into the wrong part okay no yeah so this is basically what par they're called parameters i think it can be a little confusing because we we've been introduced to URL parameters which come you know after the little question mark in the URL um but we can also use parameters in the react router uh paradigm to make the information in the URL dynamic so we can
46:30 - 47:00 basically have like a variable that's in there so I'm going to just show you really quick what this looks like and then I'll kind of walk through the slide so instead of having details 1 2 3 what I can do is just add um this parameter to my path so how we do that is with a colon and then whatever comes after that is going to be the name of our variable so here I have details/ ID which means we've created a parameter that's available to the details page which
47:00 - 47:30 includes this ID information and so we can show that by well first we have to make sure we actually use use params so um that's how we are going to get access to that information and then we can uh I'll just add it as a header so it's a little easier and then here we can add
47:30 - 48:00 params ID and that should get us access to that information contained in that URL um so oh that didn't work okay let's see what did we do wrong so details slash ID this there we go okay so now we can see
48:00 - 48:30 that the information that I passed into the ID parameter is rendered it's available to that component this can be anything it doesn't have to be a number um we can you know certainly add some kind of um verification of the information on the component uh but in this case like I can just have anything I want there so um that's the simplest case of how we are going to include um a URL a quote unquote URL parameter um for our
48:30 - 49:00 route um let's see trying to make sure I included all the slide info so all parameters yes okay so yeah we went over the use params um I can call this you know whatever I want so it could be like product ID um and then here I can say product ID and then that should work
49:00 - 49:30 too cool um okay and then yes so um we can also add in props to these elements i think we just want to show like this can still happen um so if I'm doing my routing somewhere where I already have relevant information available uh for my downstream components I can definitely pass that in here so um I could just as a quick example like if I had this extra info prop here I'm just going to pass
49:30 - 50:00 that in just like normal and I can just say like here's my extra info i could be passing this in as a variable or whatever in this case I'm just using a string um and then I obviously need to render that somewhere so uh here we are just going to use props just like normal we've we've already done this this shouldn't be really anything new just wanted to make sure you know this is available to you um that's how we would go about using that so I show you one more time i
50:00 - 50:30 added a prop to the element that's being rendered i made sure to take in my props here um just Yeah I was going to say something else but I think it's fine and then um just rendering that there super simple all right so we have one more little quiz here so if this is my route what are the props I'm passing to my element just a quick quick understanding check what do you think i saw phone
50:30 - 51:00 email that's exactly right yep we've got our props passed in there and then how can I put method here we're when we say method we're referring to this ID or sorry this um parameter how can I put method in an H1 tag at the top of contact page what would I go about using in order to reference method in the contact page pams method yeah exactly and then just don't forget to
51:00 - 51:30 Yeah exactly use the use params to retrieve the parameter variable that you can then go ahead and reference whatever you want okay um we had this discussion here you can if like feel free to take a couple minutes and kind of look for um a website that you think kind of encompasses some of these examples and go ahead and like send it into the chat if you find one uh that you think is interesting and kind of um exemplifies
51:30 - 52:00 these concepts that we've gone through today i think you'll find they're pretty straightforward and they're pretty ubiquitous um they can be very complex but it's great that you know there is this really um digestible entry point for getting started with these so um yeah so I we'll we'll go ahead and just kind of roll into the break I think um feel free to to throw those things in the chat ask questions out loud as always i'm just checking our time um yeah and then we'll we'll be going into
52:00 - 52:30 the lab i'm going to give you a little bit of direction before our lab this week um but yeah I'll just kind of hang out here questions welcome chat welcome and we'll get we'll get started again right on the hour so about 5 minutes and 15 seconds a little bit longer today
52:30 - 53:00 great so I'll see you all see you all back in five minutes but yeah I'll be here as always to answer questions uh hello hey yeah hey I just had a quick question on um nested routes in um so basically with nested routes how does it like work um how is it different from just simply defining those routes in their specific components so like um we
53:00 - 53:30 nest routes into um like we usually nest them in the app component right at least from what I'm seeing and I'm just curious like can't we just go to the specific component and then have it like um route to whatever page we wanted to so like let's say we had like a um a website that has our profile right and then we wanted to like look at to we look at the profile section and like the settings like page or something like that right can't we just have it so that the profile section has a route to the
53:30 - 54:00 profile and the setting section has a route to the settings instead of having it all in one file does that make sense um I think so i think Okay so it sounds like you're saying well why let me see if I can walk this back to our nested section um oh that's not Hang
54:00 - 54:30 on sorry once again okay so I think you're saying like can we achieve the same thing as nested routes like let's say we have a header component that's available at the root path and then we have a details component available at like a details subpath yes yes can we achieve the same thing by just making an explicit like details path which includes in itself that component both the header and details
54:30 - 55:00 yes okay i Yeah you can you can achieve that i think the the nested routes are designed to make that uh a little bit simpler and a little bit more transparent kind of and like explicitly declared at the routing level um you can there might have to be a lot of like repeated instances of rendering that header component in every subpage you might accidentally miss one you might like things might get a little weird on one of them and so the hope is that by bringing that up to the like root level
55:00 - 55:30 and kind of including that in our routing information we only have to say that one time and then we can just focus the details component on whatever is relevant for that sub component there so just kind of separation of concerns a little bit okay all right because I was thinking like um like if we have if we're routing to like um like a slashprofile um like it's better if I like type it out i don't know if you can see my messages right but um if we had like a path to like slashprofile right
55:30 - 56:00 and then it goes to a specific component correct and so once it goes to that component we can then just kind of add another route to go to like settings or something like that like that right so I was just curious if like if it if that's the same the same thing as just nesting it all in one okay yeah i um I believe it would be
56:00 - 56:30 um yes let's we can double check that we have one minute let me I always like to experimentally verify whatever I think especially if I'm not sure so um so it sounds like you're saying okay can we have Okay we have this app route here can we Okay my sorry my screen is being annoying okay here we go um have here like a route defined is
56:30 - 57:00 that what you're saying actually I don't think you I don't think you Hang on i'm not sure let's see [Music] um say uh let's see like about sure why I'm trying to make this makes sense to me we have
57:00 - 57:30 so delete that so we have this say I have slash app and the idea is like can can we add a route like a sub routabout no okay i did something wrong so let me let me double check i think we forgot to put the slash on the route
57:30 - 58:00 the slash on the route so in inside um about inside the about path there should be like a yeah I see usually you can't do this because if it's a nested route because this is actually when we have that leading slash it's trying to declare the route as absolute so I think this should be from the very beginning of the path um added onto the domain so I don't I don't think you can do this um
58:00 - 58:30 I haven't thought of of trying to do it before so I'm I'm not 100% sure but um usually I think you would want to keep a lot of this information kind of together in your routing component um you know thing things that get kind of hidden in code are ripe for you know bugs and things like that down the line and I would say that like that could lend itself to feeling hidden but but I want to I'm going to think about that a little bit more because I I'm not 100% uh sure okay all right thank you wait
58:30 - 59:00 but if you do have all your routes in like one place yeah it helps with organization but wouldn't it make it harder to pass props and state through the component hierarchy because like what if you don't have that information at that level yeah yeah it's a good point um I I'm not sure it would make it harder necessarily um given that you can pass props and
59:00 - 59:30 state to your outlet components so if I have [Music] um I don't want to spend too much time on this because I want to get us going on our lab but I you know here if I had an app and then nested routes details and about you know I can have information that's being retrieved from a server or something like that here passed into my outlet here you
59:30 - 60:00 know I think I don't I don't want to I don't want to say something that's wrong but I um I see what you're saying yeah yeah okay okay cool good question thank you yeah and I'll I'll kind of get some clarity on that during the lab make sure I'm guiding you in the right direction okay so lab time um last week I know we had a lot of trouble with the lab there was there were a few different issues that came up there was some uh incorrect direction in the lab um we're working to get that
60:00 - 60:30 fixed uh but we haven't gotten to the point yet where we can like get just get those updates like passed through quickly to the lab information uh instructions in your course portal so quickly what we're going to um go over is that in this week's lab you're going to be adding um detail pages for the coins that are available and you need kind of like a completed last week's lab as a starting point so I went through and made this as a starting point for you um to use i would recommend that you use it even if you were able to kind of
60:30 - 61:00 complete the lab last week just because um I'm trying to find my chat window and I'm like so lost uh because I don't want you to hit that rate limiting issue again and so basically this this lab that I have here is the same as what you had last week except in my initial request to get the list of coins i'm using a different
61:00 - 61:30 um you a different path here so I'm like making a request which in this case I'm allowed to pass this limit parameter which limits the number of results and in this case I'm just doing five so this kind of should prevent the issue that you might have been running into where it's kind of like making hundreds of requests and then it's like making hundreds more requests from like the for the like URLs or sorry for the image URLs and things like that like it was
61:30 - 62:00 just kind of like getting out of control um so some things are a little bit different here you can use this you can try to use your own if you want if you're kind of like feeling confident that it won't end up hitting that rate limit just because that can be really annoying because uh you have to wait for it to um undo and oh am I am I muted i saw a message that you can't hear me okay others can hear okay good um yeah so this this is just like kind of a
62:00 - 62:30 starting point for this lab it's available in the slides um you do have like several people in your breakout room so if you do hit any rate limit errors like feel free to um use somebody else's API key or something like that but also I wanted to reference really quick before you get started that you know we had that thread going uh last week in the tech help channel i believe that will still be available this week i would just ask if you're going to go if you're going to go send a message to that thread saying hey we need help in
62:30 - 63:00 our group from our tech fellow make sure you tag your tech fellow and you also maybe just include like a few words like brief snippet about what it is that you need help with just so that we can get better insight if other people are running into similar issues as you um but hopefully not hopefully this week things will go really smoothly and uh yeah go ahead and get started we're going to get sent to your breakout room shortly best of luck um go ahead and uh yeah go go out to your labs and your lab groups and I'll
63:00 - 63:30 see you afterwards good luck i'm going to step away for a minute but I'll be with an earshot if anyone needs anything i think I am screen share how did it go this week how was the lab smoother good glad to hear that
63:30 - 64:00 okay okay well some sounds like still some challenges some troubleshooting um but maybe a little more time would have been helpful okay good well I'm glad you all were able to make some progress this week on that and um we just have a few things to wrap up and then we'll let you get going so um let me make this full p full screen okay so um quick announcement our
64:00 - 64:30 summer tech fellow applications are now open so we have about two weeks before these applications close and I definitely encourage everybody to uh check out the application consider applying if that sounds like something that is aligned with uh what where you want to go so um you can as it says here submit it earlier for a better chance at securing a spot on the team but um definitely look forward to uh our summer season and everything that we'll get to learn there we're having web 102 this
64:30 - 65:00 summer also so uh yeah that's that there i think the link will be in Slack somewhere but I will just quickly send it in case anyone wants to do this right away so um okay so project preview already kind of showed you this but basically this week you're going to be adding navigation to your project that you started last week um okay as always one good thing feel free to go ahead and start throwing some
65:00 - 65:30 of those in the chat and then finally before you go really quick please complete the session survey again every week if you are at all able it's very very helpful and appreciated um you've got your project to complete before next week's session and next week we're going to be starting to go into backend work so I know everyone's really excited for that um we're going to have our intro to backend development and I think it will be a wonderful time so um I don't have a session survey link for you but you can always get that in Slack after
65:30 - 66:00 class and that's it i'm going to stop sharing um that's all thank you so much everyone i hope you have a wonderful Saturday um take care of yourselves stay safe out there thank you for showing up again happy to see you all and thank you thank you thank you uh feel free to ask questions i will be here for a little bit as always and if not safe travels wherever you are wherever
66:00 - 66:30 you're going godspeed we'll see you next week bye everyone hey I did have one quick question for on the