2.7 Programmatically Navigating to a Component

In this lesson, we are going to continue enhancing the user's experience on the front end. That is where we've been working with as far as submitting a ticket, and now we want to be able to view a ticket. But the first thing I want to do is organize our code, because we are essentially going to have two different sections. We will have the front end, and then we will have the back end. And so it just makes sense to organize it, so that we can easily find the components that we need to work with. Otherwise, we're going to have a lot of components just inside of the components folder, and that's a little messy. So inside of the components folder, I want to create a new folder. And we can call it client or front end, whatever we want, I'm going to call it Client, and I'm going to move the submit ticket forum component inside of that folder. Now, this does mean that we need to modify our path inside of app.js. So components, client, and then SubmitTicket. Now, something else I want to do, is start to organize this file a little bit better, because any time that we are going to define a route, we have to have the component. That means that we're going to have to import that component in order to add the route. So it kind of makes sense to break all of that out into a separate file, so that it's there, and we go to one place to define our routes. Because really, we don't need the components inside of App.js, unless if it's something like the app component. So let's do this. Inside of the js folder, we're going to create a new file called, routes.js. And we're going to break all of this code out into that file. And I say all of that code, it's just a couple of lines. So the first is going to be the import of our submit ticket form component. And then, we're also going to bring in our routes here. And as far as the routes are concerned, we'll just do this. We will export default, and that will be fine. Now of course, we do need to import our routes. And that's as simple as adding another import statement, and then, we will have our routes. So just to make sure everything is still going to work, let's go to the browser, refresh, and hooray. Everything is there. And you know what? Let's do this. Let's modify this URL. Instead of createticket, let's just have create. And there was one other place that we had that, inside of app.view. So here where we have that link, we'll change that to simply create, as well, and whenever we go to Submit Ticket, there we go. Okay, so what I want to do now, whenever we submit a ticket, I want to go to another page that's going to have some information, either yes, you created a ticket, here is the ID. Or we could just show the ticket and include the ID there. Now, I like that approach. That latter approach of just showing the ticket itself. So that's what we're going to do. So let's start by adding a new component inside of clients. And we'll just call this ViewTicketComponent. And since we are going to be adding this to our routes, let's just go ahead and do that. So we want to import that file, and then we want to define that route. And we will change the URL to view, in this case. But we also need to change our references to that component. Now, something else that we can do whenever we define a route, is give it a name just like our routes in Laravel. So we could define a name so that we could refer to a route by a name. And that would be useful whenever we want to programmatically navigate to another component. So for viewing a ticket, let's give it a name. And let's just choose something like client-view-ticket. The reason being because we might have a view ticket route in the admin side. And we would definitely want different routes for those things. So we have this and we have our component. So let's just see how this is going to work. Let's add a template. And inside of this template, let's have an h1 element, where we say tickets ID, and then we will have a prop that says ticketId. And eventually, we will come back and display what we need to display. But for now, this is going to be fine. So we're going to have a prop, called ticketId, so we will add that to our props. And then we just need to navigate here. So let's go to our Submit Ticket Form Component. And ideally, we would do this here. Whenever we make our request, create that ticket, we would send back the information about that ticked. Like the ID, so that then we could navigate. However, before we do that, let's look at what we need to do in order to navigate. So because we are using view router, we have the router available to us here. So we can say this, and then $router, and in order to navigate, programmatically, we use a method called push. And we could pass in the URL that we wanted to go to, so we could say, view in this case. But, since we have a named route, we could do it by name, and in this case, we'd just pass in an object, where we specify the name, and that was view ticket or rather it was client view ticket. But then we also need to specify the ticketId, because we want to navigate based upon that ID, which we don't have an ID yet. But in order to pass that data, we use something called params. Now, this is only used whenever we have a named route. If we were going to try to pass data using the URL, we would not use params, instead we would use query. But since we have a named route, we can specify the params. And then what do we have? We have the ticketId. And let's just give it some texts, hello-world. So whenever we click on the Submit button, it should navigate to our view ticket. So let's go ahead and try that, and let's click, and it works, but we're not seeing the ID here. And that is because we did not properly set up the route. So we need to go back to our routes .js, and whenever we define the route, we have the path, we have the name, we have the component. But then we have to say that we can accept props. So we say props, and give it a value of true. So then, if we go back, let's refresh, and go back, and submit the ticket again, we see hello-world. But also notice that up here in our URL, we just have view and, while that's useful ideally, we want to have the Ticket ID up here, as well. So what we need to do is just have a place holder here. And we do that with a colon, and then the name of whatever we want this to be. Since we are using tickedId, that's what we're going to use. So once again, let's refresh. We go back, and now we not only see our Ticket ID in the body, but we also see it in the URL, as well. And so, now that we have something that can grab that data here, we can type whatever we wanted to. So we could say foo-bar, and we would see that as the Ticket ID. And this is going to form the basis of showing a ticket. So that in the next lesson, we can write all of our back-end code to fetch that data and supply to our viewed components, to display that data.