2.3 The Projects Route

Right now, our list of projects is just being displayed on the home page of our application. However, we want to have routes in our application. So we're going to create a slash projects route, where the user can view the list of projects. If we come back to our module file here. You'll remember that we already imported the router module. And we are already imported it directly into our module itself. So now what we have to do is actually define a couple of routes. So I'm going to create a constant here. Which is going to be called routes. And this is going to be an array of the routes in our application. Now, this array of routes is going to go inside of our call to RouterModule.ForRoot down here in imports. So, let's just change that empty array to our array of routes. So, right now, we're going to create two routes in here. The first one is going to be for the path projects. And we are going to use the component, ProjectsComponent. And believe it or not, it is that simple. Basically, whenever the user goes to /projects, they're going to see the ProjectsComponent. Now, the beauty of this is that we're initially rendering the AppComponent, right? And if we open up the template for the app component, you'll remember that we put this router outlet in here. And so, what's going to happen is the component that needs to be rendered for this specific route will be rendered inside that router outlet. So here inside of our app component.html file. Let's remove our direct call to our projects component. Because we know it's gonna go inside this router anyway. Okay, let's add one other route here. And this is just going to be for the path empty string, which is the home page. And what we want to do is redirectTo. And we're going to say, redirectTo /projects. So basically what's gonna happen here is whenever someone goes to the home page. We're gonna redirect them to the Projects page. And we also just have to say pathMatch should equal full. So we're matching this whole path of nothing. But whenever someone comes to the home page, they will be redirected to the projects page. So that should be all we need to do to actually see this in action. If we come back to the browser, notice that we're actually already on the projects page. And that's cuz it refreshed and was on the home page, so it redirected. If we try to go to the home page, you'll notice that we are automatically redirected to the projects page. And if we open up our browser console here, we actually have no errors here for the first time, I think. And that's because we cleaned up those remaining errors by adding a route to our project. There we go. Now we have a specific page where we can view our list of projects. So with that slight detour out of the way, we're ready to get back to the main task of displaying projects. And so in the next lesson, we'll look at how we can pull projects from the server to display to the user.