FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Adding Routes

In the last lesson, we looked at the first bits of creating a router. So now let's make this router useful to our application. Our application currently has two main sections. We have a little form that allows us to add a new book and we have the actual list of books. So why don't we put those pieces on two separate routes. So what we can do, inside of our router, we create a routes object and the way this works is that the key is the route that we are trying to match and the value is the name of the function that we want to call. So I could say blank here, meaning the root route, and we can say call the list function. So this way, we can create the list function here, and in here for starters why don't we just do a console.log. And I'll just log viewing the root. And so now, if we come back to our application, let me open up a console here. If I refresh the page, you can see that we have the text viewing the root displayed in the console. The route that is currently being browsed to matches this route here, which means we call the list function. Let's add another route here. We can listen for the add route if we want to call the add method. And let me just show you, although it won't be as useful in this sense, if we want to get tokens within the route. We can do that by saying :token, and in this case that won't be as useful, but I'll just show you how it works. That token will come to this function here as a parameter. So I can say ID like that and now we can just say console.log, and let's just log, add and I'll just throw the ID in there. And so now, if I browse to add /1 for example, you can see that in the browser console we have add: 1 displayed here. Now one thing I want to point out here is that our server is set up to send this index page to any request that doesn't match another route. So as you can see down here, you have app.get star which catches all routes that are not matched by any part of our book api here, and it will send public index.html. So this is why, no matter what route we put in here, this page will always be loaded. In a real web application, you might want to tighten up that rule a bit, instead of just letting every route go through. But for our purposes, that's good enough. So, our add is actually not going to take an id, It'll just be /add. So, let's go ahead and do this. So, the first thing we need to do is allow our router to be aware of the views that we want to create. So within list here, what we should do is pretty much what we're doing up inside this fetch, here. Let me copy this fetch and I'll paste it down here, and let's just get rid of add portion. So, let's render the bookView like that. But we're probably gonna want to create it in here, because there's nowhere else we really need it. So let's cut the creation of the bookView and paste that in here as well. Okay, so let's see. What else do we have to think about? Well right now we're rendering inside of this fetch, which we don't want. However, we still need to do the fetch, and we want to wait to render anything until we actually do the fetching. So let's do this. Let's move our rotor and our history to inside this fetching. So if we come back to our main page here and refresh it, you can see that we have just our list showing up. However, if we go to /add, you can see that nothing shows up on the page, but we do have our little comment console logged. So notice that nothing shows up on the page, which makes perfect sense, because our booksView only shows up on the page when we go to the list route. So let's move our add bookView down here into the add and then let me just copy this appending and let's change this to add bookView and that should work just fine. So now, if I refresh the page, we have our book list, however, if I go to /add, we have our form. And I can add something. And now when I click Add New Book nothing actually happens. But if I go back to the home route, you can see that we now have two books in our list. Let's do one more thing. Right now, books here is being accessed from inside of our router as part of this global variable. Let me move this down here to where we do the fetch. And instead of accessing it as a global variable within book router I want to pass it into book router as an option. So I'll get an options object here for book router and we'll just say books=books. Then we'll add an initialize function to our router. And in here, we can just say this.books = opts.books. And then down here, we can say this.books and this.books. And that should work just fine as well. If we refresh the page, you can see everything is working out just fine. All right, so our application is working pretty nicely, but there's one more thing that we'll want to do with routers and that is navigation between routes. And so we'll look at that in the next lesson.

Back to the top