‫So let's now move back to React Router
‫and learn about probably
‫the most confusing part of declaring routes,
‫which are nested routes.
‫So we need nested routes when we want a part
‫of the user interface to be controlled by a part of the URL.
‫So in this case here, in this part of the sidebar,
‫right now we are showing this list of cities.
‫And so notice how here in the URL,
‫we have slash app and then slash cities.
‫And so basically this cities part here is displayed
‫because in the URL we have cities.
‫So watch what happens when we click here.
‫So you see that now this last part of the URL
‫has changed to countries.
‫And so then we are displaying this list of countries here.
‫And the same thing happens when we click on the map.
‫So then here we get slash form
‫and nevermind the last part here.
‫What matters is that we got form
‫and so then in that case, we display this form.
‫And then we can go back to the cities
‫and then we have our cities list again
‫which corresponds to this part of the URL path.
‫So nested routes are basically to implement
‫exactly this behavior.
‫So where we show a part of the UI
‫based on some part of the URL.
‫Now note how nested routes are not simply routes
‫which are made up of multiple parts like this one.
‫So just because we have a longer path with these two parts,
‫this doesn't make it a nested route.
‫Instead this is actually a nested route
‫because this path here influences what component
‫is rendered inside this bigger component.
‫So in this case, this city list is rendered
‫inside this big app layout component.
‫Okay?
‫And so now let's do that in our code,
‫in our own application.
‫So we want to now declare a couple of nested routes
‫and we do that basically inside a route element.
‫So in this case, let's come to this route here for the app
‫which is this first part of the URL here.
‫And so now it's as simple as removing this closing part
‫and then closing the route element like this
‫so that now we can create some nested routes in here.
‫So basically, child routes of this parent route.
‫So let's do that and let's use the path of cities.
‫So exactly what we have right there.
‫And then the element that we want to display here
‫doesn't actually need to be a component.
‫So really this is just any JSX element.
‫So we can just for now create some paragraph here
‫until we have that city list component.
‫So let's just write list of cities here
‫and then let's close this route as always,
‫give it a safe and then let's do another one.
‫So another child route.
‫And let's use the countries path here.
‫And then let's display again
‫just a simple paragraph like this.
‫And notice how here in the path description
‫we actually don't have to include the parent path.
‫So React Router is smart enough
‫to basically combine these two.
‫Okay and now let's just create one more for the form.
‫And again, just a very simple paragraph right here.
‫Now just close this route.
‫And with this for now, we are done.
‫So we now have our three children routes here
‫and with this we are actually done.
‫So we have defined three child routes
‫of this app route right here.
‫But now where are these elements,
‫like this one or this one,
‫actually going to be displayed in the UI?
‫Or in other words,
‫how are we now actually going to display one component
‫or one element inside another component?
‫Well, that's where the outlet component provided
‫by React Router comes into play.
‫So where do we actually want to display these elements?
‫Well, they should be inside the sidebar.
‫So right here instead of this hard coded paragraph
‫that I created here.
‫And so in this place is where we are now
‫going to use that outlet element.
‫So let's give it a safe, let's check this out,
‫and then I will explain exactly what has happened here.
‫So as we reload, we see nothing here
‫but then let's try to manually write cities.
‫And there it is.
‫So there is our list of cities paragraph
‫that we defined right here for this children route.
‫So for this nested cities route.
‫So let's see what actually happened here.
‫So React Router saw this URL here
‫made out of these two parts.
‫And so first it saw the app part
‫and so that then matched this route right here.
‫But then the Router noticed
‫that there's also this cities part,
‫and so then it went into these nested routes.
‫And so then of these three here
‫it selected the first one to be rendered.
‫And so then it did basically render this part.
‫And where did it render this part?
‫Well, it placed it right here into the outlet element.
‫And so this is actually pretty similar
‫to the children prop if we think about this.
‫So it's similar to this right here whenever we pass
‫some element inside another element in JSX,
‫with the difference that here we are not
‫using elements but routes.
‫And so of course the children prop is not going to work
‫but instead we use something similar,
‫which is the outlet element.
‫So of course if we now change this to form,
‫so not from but form,
‫then we get the form element here.
‫Now okay?
‫But watch what happens when we just go back
‫to this normal route here.
‫So without specifying any of the nested routes,
‫well then our sidebar is empty, which is not what we want.
‫So here when we come just to app-
‫that didn't work.
‫But anyway, in this application, when we come just to app
‫then we want to show by default also this city list here.
‫So we can actually do that
‫with something called an index route.
‫So let's add that here.
‫And so an index route is basically
‫the default child route that is going to be matched
‫if none of these other routes here matches.
‫So right now, that is the case here
‫because basically we have nothing after that app path.
‫So then none of these is matched.
‫And so, let's basically create a default here.
‫So we call that index and as we just said,
‫here we want to again
‫display the paragraph of list of cities.
‫But it could be anything else really.
‫So let's just try that for now.
‫And, I again forgot to close this route element,
‫but in any case, now you see that we see this list here.
‫And so that's because now of this index route.
‫But now let's go back to list of cities
‫and so then this list of cities,
‫which will later be its own component,
‫will be the default here as soon as we open the application.
‫And we could actually do the same thing with our homepage.
‫So if we come here,
‫we can remove this path and also make this an index route.
‫And so if we now reload the application
‫then you see that by default it goes here to our homepage.
‫And now to finish,
‫we want of course a way of moving
‫between these different nested routes
‫instead of having to manually write them here, right?
‫So like this.
‫So basically we want now to implement
‫this app navigation component.
‫So let's go open that.
‫And here we already have our styles.
‫And so now all we need is this unordered list
‫and then just like before a list of some Nav links,
‫which are again provided by React Router,
‫and now here we can just specify
‫exactly the path that we specified in our nested routes.
‫So cities, yeah, then let's to another one here.
‫So another Nav link in this one here to countries.
‫So again, repeating exactly the path that we specified here.
‫Okay, so countries, and there we go.
‫And since we are using this Nav link here,
‫then the element that is currently active
‫automatically gets the active class.
‫Remember that?
‫And so in order to style that,
‫we already have some code here again,
‫which does that styling of the active class.
‫Alright?
‫And so now as we click on these different links
‫then you see it moves to countries
‫and here goes back to list of cities.
‫And for the form I won't add a link here
‫because later on that will actually open
‫as soon as we click on the map here.
‫So that's not part of this navigation.
‫Now if we think about this,
‫then what we just implemented here
‫is actually very similar to something like a tabs component,
‫but implemented in a very different way.
‫So before, if we wanted to implement a tab component
‫where we have these tabs here
‫and then the content changes
‫according to which is the active tab,
‫we would've implemented that using the U state hook
‫to manage the currently active tab.
‫But here with React Router, we do the same thing,
‫but in a very different way.
‫So instead of using the U state hook to manage state,
‫we basically allow React Router
‫enter URL to store that state of the active tab.
‫And so then whenever this URL here changes,
‫then we change which tab is currently active.
‫So React Router is a whole new way
‫of thinking about how we built an application.
‫Now of course that doesn't mean at all
‫that all we have learned before is useless.
‫So we still build components like accordions
‫or tabbed components like the one I just mentioned
‫using the U state hook all the time.
‫But from now on, the overall navigation of the application
‫is in the real world always managed
‫by something like React Router.
‫And so that includes a small sub navigation like this one.
‫So hopefully this wasn't too confusing
‫but just make sure to review all we just did.
‫So how we implemented our nested routes here
‫inside another route element.
‫Then we rendered whatever the nested route
‫wants to render inside the outlet component here.
‫And then to actually switch between the nested routes
‫we implemented yet another navigation
‫with these Nav link components to basically link
‫between the different URLs,
‫which in this case are these sub URLs.
‫So with the sub routes of cities and countries.
‫Okay.
‫And so once that is crystal clear
‫let's move on to actually implement
‫this list of cities here.