‫So let's now use React, Router params
‫in order to pass some data between pages.
‫So just like we have learned in the previous lecture,
‫and to demonstrate what we're going to do
‫I'm back here in the demo app.
‫And so as I hover over one of these items
‫watch the URL down here in the corner.
‫So it's really small, but try to see it.
‫So see that there we have app slash cities,
‫and then slash the ID of the city.
‫And if we go to another one, then the ID changes.
‫And so if I now click on this link, it'll move there.
‫And so now that ID is right here in the URL,
‫and as you might have noticed then this component
‫down here used that URL to fetch the data
‫about this city from the fake API.
‫And so that's what I mean by
‫passing data from one page to the other.
‫So in this case, we passed the ID of 739 by clicking here
‫and then reading that ID in this component from the URL.
‫And so all without storing that data somewhere
‫inside the React application,
‫which we would have to do without React Router, right?
‫And so let's now implement the same thing
‫here in our application.
‫So to use params with React Router,
‫we basically do it in three steps.
‫So first we create a new route,
‫then we link to that route,
‫and then in that route we read the state from the URL.
‫So that's just a high level overview,
‫and so let's now do all of these steps one by one.
‫And so first we create a brand new route here.
‫So let's do it right after the city's route here.
‫So a new route with a path
‫of cities.
‫And now comes the special part.
‫So this one is cities and then slash colon,
‫and then whatever name we want to give the parameter.
‫So let's call it ID in this case.
‫And so the shape of this URL here
‫is then exactly the same as this one.
‫So cities slash whatever ID has been passed in.
‫And then from there on the rest is the same.
‫So here I want to now use the city component
‫which actually already exists.
‫So let's write that here,
‫and so here is that city component.
‫So it already has some stuff in there
‫like this temporary data and all this JSX.
‫Now here we just need to remove that button
‫and I will actually remove,
‫or comment out all of this return block.
‫And instead I just want to return for now,
‫an H1 saying city,
‫because we will load the actual city data,
‫later on in the next section.
‫Okay and I keep forgetting
‫to close these route components.
‫Okay, and now all we have to do,
‫is to import the city component.
‫So city like this.
‫And so with this, we fixed all the bugs.
‫So this was the first step,
‫which was to create a route
‫with this path linked to this city component.
‫And so then whenever the URL takes this shape here
‫so cities slash something
‫it will then render the city component.
‫Now next up is the second step,
‫we actually need to link to this URL here,
‫so to this route.
‫And remember that we want to do so
‫right here in each of these list items.
‫So let's come to city item right here.
‫And so now inside of each list item element
‫we will actually place a link.
‫So one of these special links that comes from React Router.
‫Let's just close this for now.
‫And so then all of this stuff will go in there.
‫And then we just need to change the class name
‫from the list item to the link.
‫So let's reload.
‫And then that looks just like before.
‫However, we are missing the two prop here,
‫which is where now we will basically
‫pass in the data that we want to pass
‫from this page to the next one.
‫So to the city one.
‫So here we need actually a string.
‫So let's create a template literal,
‫and then all we want here
‫is actually the city id.
‫So let's grab that here from the city object,
‫and then let's just place that there.
‫And so now if we save this, and if you see down here
‫then notice how we already see those new links there.
‫Now as we click here,
‫then it actually moves,
‫and here we get the URL.
‫So we get that ID inside the cities slash ID URL
‫exactly like we have defined here.
‫Alright? And it's really important that here we
‫only pass in the ID because in this format,
‫this will then simply add it to the current URL.
‫While if we started this with a slash then,
‫let's come back here,
‫then in that case,
‫if we clicked it would simply go to
‫the root URL slash the ID.
‫So that's not what we want.
‫We want to basically attach this ID here to the
‫end of the URL that we already have.
‫Alright, so let's try that again.
‫And yeah, there it is.
‫Now in case you actually don't
‫have the cities in the URL yet
‫so in case you just came here and now click here
‫then this whole thing is not going to work
‫because then we don't have the cities part.
‫So it's important that first you click on cities
‫so that the URL gets that cities,
‫and then you can click here.
‫So we will fix that later in the section,
‫but for now make sure that you first
‫really activate this cities page,
‫so the city's route, so to say.
‫And so then again once you click here,
‫this ID from this city will get passed into the URL.
‫And so then we move to this other component,
‫and now in the third step we can then
‫read the data from the URL into this component.
‫And with that, we will then finish this entire cycle.
‫So let's come into the city component.
‫And then in order to get that data from the URL,
‫we use the useParam hook.
‫So useParams which is once again,
‫provided to us by React Router,
‫so it needs to be included here.
‫And so this will then return something to us.
‫So let's just call that X for now.
‫And then I want to console.log that X
‫and immediately we saw down here what we got here.
‫So we got this object with the ID that is right here.
‫And if we went back, for example, to Faro,
‫then here we got this 4545 ID,
‫and the reason why this is called ID here is because
‫that's the parameter name that we gave it here.
‫So if we called this city
‫then down here it would be called city.
‫So this here really determines the name of the data,
‫so of this parameter that we're passing in.
‫And so then here in the component where
‫we consume this data from the URL
‫we usually immediately destructure that.
‫So just like this.
‫And so now the only thing that I want to do here
‫is to then write that ID into this H1.
‫So for now, this is all that we're going to do
‫but later then in the next section
‫we will use this ID to fetch all the data
‫about the city from our API.
‫Nice. So we just learned how to use this very important tool
‫of React Router that are params.
‫So let's quickly recap.
‫So we created a new route right here,
‫and of course it wouldn't have to be a nested route,
‫so we could have done this anywhere here.
‫And here, let me just remove this actually.
‫So of course we could also have done product slash id,
‫so it wouldn't have to be a nested route
‫but this is just where this is useful in this application.
‫But of course in future applications
‫that we're going to build,
‫we will use params in some different place.
‫But anyway, here we specify the name of the param,
‫and as always the element that should be rendered
‫when the URL matches this path.
‫Then we basically link to this route,
‫so we create a link that we can actually move
‫to this page here in our application.
‫And we did so by passing in this data right here.
‫So this ID of each city.
‫And then as a final step,
‫we read that data from the URL using this useParams hook.