‫In this lecture,
‫let's learn how we can implement
‫a global application layout using React Router.
‫And let's start by actually first building that layout
‫so that we can then connect it with our Router here.
‫So what I want to do is to create a layout
‫that is going to work both for big screens
‫like this one here, or even for mobile phones,
‫so for really small screens.
‫So what I want to do is to create a header up here
‫with the name of the company and a link to the homepage
‫and maybe the username as well.
‫Then the main part of the page
‫should be for the content itself.
‫So like the pizza menu or for the current cart view.
‫And then down here I want to have like an overview
‫of the cart that is always visible on all the pages.
‫So basically that displays how many items are in the cart
‫and a link to the cart.
‫So to make that very important part of the application
‫always accessible from everywhere.
‫And so this cart overview
‫and the header will be part of the layout,
‫so the part of the application that is always visible
‫while the only thing that changes
‫is then this part here in the middle,
‫which again, can be the menu or the cart,
‫or the form to create a new order.
‫All right, so let's create a new component here
‫inside the UI folder.
‫And let's, so actually not a folder, but a new file.
‫And let's again call it app layout,
‫just like we did also in the World Wise application.
‫So using our snippet here,
‫and then here we want that header.
‫And again, we need to create a new component for that here
‫'cause we don't have that yet.
‫And again, this is one of these UI components.
‫So a component that doesn't fit into any of these features.
‫So Header.JSX, and that start with this one actually.
‫So here, let's make it a header element.
‫And then as I was saying, here,
‫let's for now just start with a link
‫that always allows us to go back to the homepage.
‫So this is something very common in all web applications.
‫So let's import that from react-router-dom.
‫And then here the link goes to the root URL basically.
‫And then here the name of the application
‫or the company in this case, so Fast React Pizza Company.
‫And so this is going to act a little bit like the logo here.
‫Then later we will have some username here as well.
‫Let's just put something static here for now.
‫And with this we can close this
‫and then start to include that here in our layout.
‫So for some reason the automatic imports
‫are not really working here.
‫So from,
‫and then we need to go up
‫or actually it's right in this same folder.
‫So you want the Header, then we will want the main content.
‫So let's place that inside a main HTML element.
‫And then for now, let's just place one h1 here.
‫So for the content,
‫and then here we want that cart overview as I was saying.
‫So that component we actually already have.
‫So it's just some static HTML here for now.
‫But that's going to work for now.
‫Also notice that there is no styling here anywhere.
‫So there are no class names or anywhere to be seen.
‫And that's just because we are going to style this
‫using Tailwind in the next section.
‫Now here, notice how we have a link to the cart.
‫And so let's actually replace this anchor element here
‫with again, the link from React Router.
‫So going to cart
‫and then here closing the link.
‫And nice.
‫So then let's here also include that.
‫So CartOverview
‫and importing that manually Overview from,
‫now here, we actually need to go up a few,
‫or at least yeah, one.
‫So into the features, into the cart,
‫and then CartOverview.
‫Now, okay, and with this,
‫we have our app layouts done for now.
‫So the header, the content, and the cart overview.
‫And so now how do we connect this here
‫with our Router definition?
‫Well remember how we did something similar
‫earlier in the World Wise application.
‫So remember how here we also had the AppLayout component
‫inside this route here, so as the element for this route.
‫And we then had all these routes here as nested routes,
‫so routes that are rendered inside this parent route.
‫And so here we can do something similar.
‫So basically we can do the exact same thing
‫but with a different syntax
‫inside this new createBrowserRouter function.
‫So the way that we define child routes,
‫so nested routes, is by defining the children property.
‫And so children then accepts another array of routes.
‫Now we don't want to do that here,
‫but really here basically as the parent route
‫of all these other routes.
‫So let's create a new object here.
‫And here the element that we want is that app layout
‫that we just created.
‫So this one right here.
‫And here, we don't need any path
‫which will then effectively make this a layout route.
‫So basically a route,
‫but the only purpose of providing a layout
‫to the application.
‫And so then as I was saying earlier,
‫we need to make all of this year their child routes.
‫So basically the nested routes.
‫And so we define this children property here
‫and then we pass it a new array of routes.
‫So we grab all of this, cut that and paste that here.
‫And if I now save this,
‫then we should immediately see that result here.
‫And indeed, that worked beautifully.
‫So here we have now this pizza overview and here the header.
‫So if I click here, it'll go to the cart as we see here.
‫And then here it goes back.
‫However, of course here we are still showing
‫the exact same h1 content in all pages.
‫And that's simply because we didn't tell the app layout yet
‫to use the child route.
‫So basically we didn't tell this component
‫where to render the child route content.
‫So right now that would be this element here.
‫So we want this element then to be shown here.
‫And if we are in the cart URL,
‫then we of course want this cart element to be shown here.
‫And remember how we do that.
‫So basically remember how we render the content
‫of a nested route inside another route.
‫Well, maybe you remember the outlet component.
‫So Outlet provided by react-router-dom,
‫and there it is.
‫Now it's a bit difficult to see here now
‫because all of this is not really styled,
‫but I think you can see
‫that this here is basically the cart.
‫So here if we go back to menu
‫so then we will go here to /menu,
‫then indeed we get the menu.
‫Or if we go back to the homepage by clicking here
‫then we have that h1 there.
‫So inside this main,
‫we now really only want that content
‫and no longer that h1.
‫And so with this, we now have our layout in place.
‫So let's just quickly recap what we just did here.
‫So we created this app layout component here
‫which we will want to use as the parent route
‫of every single other route that we have in our application.
‫And so that's why we placed
‫that app layout element right here,
‫basically at the top.
‫And then we made all the other routes
‫child routes of the app layout.
‫So they are all nested routes now.
‫And so then inside the parent route,
‫we can use the outlet component
‫to render whatever is the current nested route.
‫And so again,
‫this is similar to what we did earlier
‫here in the World Wise application.
‫The difference was that we didn't have the app
‫layout component as the parent component
‫so the parent layout of the entire page,
‫it was really only of that part
‫that was the visible application
‫with the map on the right side
‫and that sidebar with the cities.
‫So remember that?
‫But then outside of that app layout,
‫here we also had all these other pages
‫that had a different layout.
‫So this was a different application.
‫And so we did things in a different way,
‫but here this is how we do it.
‫So we have just one layout all the time.
‫It never changes throughout the app.
‫And so therefore,
‫this is basically our parent route of all other routes.
‫And as I mentioned earlier,
‫since this one doesn't have a path,
‫it is technically called in React Router
‫a layout route now.
‫All right.
‫But that's enough talk about layouts.
‫Now let's actually get to fetching data,
‫which is, as I mentioned earlier,
‫the main new feature of React Router 6.4.
‫And it's the whole reason
‫why we declared our routes like this in the first place.