4.7 Challenge: Basic Routing

Our next challenge has to do with some basic routing. Although the version of React Router has kind of updated since this course was produced, these principles still apply. So as you can see our app has a home route and a component and we need to add some routes and components. We need to add a route/a which points to a page A and a route/b which points to a component page B. And then we have to have these components link to each other. So this is a great little exercise for getting familiar with using React Router, and more specifically, React Router's link component. So let's go ahead and fork this. And if you want to do this challenge yourself, go ahead and pause the video now. Okay, so let's see what we have here. At first we create an in memory router and this is nice for testing because we don't need to actually have access to an address bar. React router will just store the rote changes in memory. However, we do have a location bar component which kind of acts like the location bar for us. So this is actually pretty great. So as you can see, the homepage, our index route, or rendering gives us two links here. It gives us a link to /a and a link to /b for page A and page B. So what we wanna be able to do is click these links and go to those pages, so we're gonna need to start by creating the components for those. So we will start by creating a component called Page A. This is just going to be a basic div here, and at the top, let's have an h1 which says Page A. And then underneath this, let's have a paragraph, maybe, and in here, we can have a link to Page B, and we'll just say Page B, and we'll close off our link, excellent. So now, down here inside of our Router, let's go ahead and add a route for that. So we can create a route here and the component for this is going to be, page A, but we also need to give it a path and the path for this is /a. So now over here, I could go ahead and click Page A, and this will render our Page A component. If I click Page B, we don't actually have a /b route yet, so we need to create that next. So I'm gonna go ahead and just copy the page that we created for Page A, and we will change this to be called Page B. Change the h1, and then we'll change the link to Page A. And so now, we can create another route in our Router here. The path here will be /b, and the component is going to be Page B. There we go. So let's save that and now from our homepage here we can go to Page B. And this we'll take us to Page A and we can go back and forth between Page A and Page B. Looking at our location bar, we can go back to the home route as well and we go to Page A or to Page B individually. Excellent, so that's really all you needed to do. This is a pretty simple excercise but it gets you used to the idea of creating components that are top level components that are meant to be rendered as an entire page. So that is our basic routing challenge.