We have already implemented our single page application by integrating three different components, and then providing a way of navigating between these views within our React application. The one thing that we have left out so far, is showing the details of a chosen dish. Now, that part requires us to use an additional feature of the React Router, that enables us to pass parameters in the URL that we use in the React Router. Now, in this lecture, we will learn how to pass parameters through the URL, and make use of the parameters in another component in order render the view there. So, when we choose a specific dish, we will pass in the details about the dish ID as a route parameter to our React Router, and that information will get delivered into the specific dish detail component where the appropriate dish can be rendered. So how does this work? To help us understand how route parameters work. Let's look at the React Router, and we already have learned that the various parts to the various views in our React application can be specified using the URLs. Now, what if we attach a parameter value to the URL? So for example, if we want to display dish number 42, if we can place /menu/42, and the interpret 42 to be a parameter which identifies the specific dish that we want to display. Then, if this number 42 can be delivered to the dish detail component, and then it can make use of that to select the appropriate dish, and then display that appropriate dish. So, how do we pass parameters like this in the URL of a route, using React Router? So, this is where the route parameters enable us to specify the part of the route as a parameter that will have to be interpreted appropriately by the React Router. So, for example when we specify a path in our application, we can say path as 'menu/:id'. So, if you specify a path like that with a parameter starting with a colon, then whatever follows that will be interpreted as a route parameter by React Router. So, when you say menu colon id, id becomes a token which gives the parameter, the route parameter that can then be used by React Router to appropriately render the view corresponding to that path. This is the strategy that we're going to employ in passing that chosen dish's id over to React Router, and enable that to set up the dish detail component to display the details of the chosen dish. Now how do these route parameters become available? See, these route parameters when you specify that within our code, we would specify that as link two, and then you can say menu, and then you can even provide that second part as a value that is dependent upon a JavaScript values property. So, the dish id is part of the dish's property there. We're going to be able to extract that and put it into a link by using this. Note that when we specify something like this we'll have to enclose this in back quotes, back quotes, not the forward quotes, back quotes. So this is very important for you to note, how we can add this into this. So, the same procedure can be used also in NavLink, or wherever you want to pass this information over. So make a note of how this has been passed, and we will be updating our application to use this approach to passing the route. Now when this happens, this route information, what the route component does, is it passes three pass props to the component which it is rendered. Three props that it passes is called match, location, and history. Match is the one that carries the route parameters inside it as its own properties. Location where you are in the URL location and history will allow you to go back. Now I'm not going to deal with location and history and how we make use of this in this exercise, we will defer that to a later stage. But, we'll look at how the match prop can be used to extract the parameter that is passed in the URL. The exercise will illustrate that in more detail. Now, what does this match object provide for us? This match object enables us to determine a path. So, when you specify various route parameters, these become available through the match object as params, which is a propagated gets associated with the match object. So, when you say match.params, you'll be able to get access to all the params, as a key value pair here. So, each param is associated with a key value pitch. So, params, said if we specified the path as menu:id, then this id will be used as a key and the value. So, if you specify the value as menu/42, then 42 will be the value. So, the key will be id and value will be 42. And so that's how that becomes available within the match object that is given to your component and there you can extract that information out in order to decide how to make use of their information within your component. So, this is the basic strategy that we're going to be making use of to pass route parameters over to another component, and then make use of it within that component. Now, understanding this, let's move to update our React application so that we can display the details of any dish that the user clicks on in a separate view within our React application.