React and Tailwind CSS Tutorial for Beginners | Building a dashboard - #2 Layout & React Router

in this video we'll take a look at the layout and we'll add react router Dom for this uh red router old user version 6 of this because it introduced a lot of stuff so yeah we'll handle the layout part with the react router basically we'll go ahead and add rear router Dom we don't need to add six because it's the default one now so we'll start the server so you will stop the server I will add an ad and then dragged out a Tom to our project and we'll start our server again okay so basically what we need to do so here you can see uh we have a sidebar over here and we have a header over here and you have this main part which contains so this part basically this highlighted part starting from here to here and here to here right so this main part will be changing uh frequently in our app like this router so when basically we change so let's say like we'll navigate to the products right this sidebar and this header will not rain and or not change so basically only this part this area will be changing if we change a new route but obviously we'll be needing um like another routes where this is not needed and we'll take a look at like how to do that so let's say like we're going to register on it so as you can see it is not there but we'll be building it's not working but yeah so let's uh let's start by um adding this router stuff so we will so basically scroll down and we will basically scroll down and we will copy this part because this is what we want in our layout right here as you can see it's an example of how to use layout so let's start by creating a folder uh I'll call these components because it will obviously contains all the components and inside of it I will create another a folder called shared and inside of shared I will create a new file let's call it layout Dot jsx right okay with this importing react and we're just exporting a default function that's why uh that's how we create a component in react let's render some dummy tags over here and in our app j6 Google paste this routes and all what we do we'll just import this routes socket this will be importing um some stuff from the router down because um this needs to be imported from the router.com package so um what is happening here is okay there's some issues we'll fix that yeah there are some issues um as you can see route is not defined and some other issues so problem here is as of vs like version 6 of Tom it's really confusing to follow the docs over here so I'll just uh paste it so uh but like what you need to do is just wrap this in a router right it is very required it is not here right in the example code I think they need to update this somehow um so let's say okay we have all our outs right so but the important thing to notice here is um this is how we build our layout uh component right so as you can see we have our route over here and any clicks out it needs a path proper and an element prop but you are passing um like layout as an element and you are nesting other routes inside of our layout component so that's how this suggests to build a nested route basically and what we can do is so in our layout component right so import this Outlet component which is provided by real shortcut Dom so what it does is if we if we Nest other routes inside of a inside of our route we should be rendering our element so that acts as a wrapper for those routes right but we need to explicitly tell the router Tom to where to like basically um render each route basically so if you take a look at this so This sidebar and this header is our layout component is from layout component and we're just surrendering different different route inside this part right so we're gonna do that so here you can see uh I'm just adding a div you can say sidebar right and uh another div you can say header right but inside so but here we'll be adding a another div where we will render out this Outlet component so this outlay component will act as a like children component for the wrapper right so any any route inside like wrapped around wrapped inside the layout component will be uh like passed as Outlet component so if we save it so let's uh let's make this an index path you can like pass index so this is same as selling like telling index is true because this is the default route for the layout right and we have already said this set this path so in this element will be like rendering our main dashboard so inside of component we'll create a file called um dashboard dot TSX right and we'll see uh this is dashboard right and we basically want to import the dashboard from this component available in this path right and we're gonna wrap around this we have some problem in here cannot resolve component dashboard layout is not defined okay so we we obviously need to import the layout form component shared and layout I don't know why it is saying that it is not okay I have set it TSX it's jsx so yeah as you can see there is no like problem I know and we'll create another um uh component called products okay I'll say jsx over here and I will say products this is products page okay and here we'll just copy the line and say path products right now we'll copy this and also products also basically import from the components right so here you can see this is dashboard right so this is our layout component rendering this part only this sidebar and header will be uh like common in every route so if I say products over here there is no products again products okay as you can see this is a product page so so what is happening here so we are just unwrapping our two routes this index route and this path route right this products route sorry uh inside of a layout component so how layout component works is we'll just import outlet and we will say where our um component I will just use this as the children for the layout component right or if you get it so uh to show you um this layer component is working I'll just give this a peachy uh Sky of 100 background Sky color and this opacity is 100 like intensity uh it is basically vary from 50 to 900 in till wind so I'm using a lighter shred of Sky color and this one I would say PC uh to you 200 right and okay so as you can see this is the sky color okay I'll make this 200 this is really good to see okay this is sidebar this is header component not component like uh it exists in our layout but this will not change throughout our routing is happening right so in uh so let's demonstrate it so let's add a link over here which will be coming from the rear router Tom so link is used to route to other routes go to other routes so I will say products right go to products right Now map is a round of paragraph so that will come down okay so I'll do exactly the same in the dashboard page sorry the products page but I will say go to the home go to the dashboard the main dashboard page okay I will just import the link over here let's make this some I'll I'll make this underlined so you can use uh underline to to basically let's make this underlined text there's some issues which is a subscription must have one parent and where okay everything is cool so if we go to the index route we can go to the products page we can like click back and forth but the sidebar and header will be fixed because of our layout component so this Outlook will be changing if we are changing this routes right from index to products but all the things except this Outlet will be fixed so let's say like we'll be having a paragraph for some reason like let's say this is a photo component see so we are having a photo cabinet over here but this photo component and this here sidebar and header will be there's no matter what route we are visiting okay I hope I make this clear so this was uh like how we can structure our like routing so before we go to next video um so I will share some other stuff so let's say like we do not need this layout component for some reason for some routes right let's say like for register page or login page you do not need our sidebar and header to be visible on our footer to be visible right then we can have an another route over here which will not which will basically outside of this like component sorry so yeah I'll basically this isn't this will be uh like Auto closing just like this and we'll copy paste this and go to and and I will call this a login route and I'll be for now I'll just renderer div over here okay this is login page page I have so if I go to login page now this is a login page but this will not render inside of our layout component because this is not nested inside our layout component but if I choose to render this inside our layout component we'll just move this like all this Nest it inside our layout component and yeah this is a login page on this sidebar render will be visible for the login page as well but you do not need that so we'll be keeping it alone like separate right so yeah uh I hope you have learned something so and thank you so much for watching this video and I will see you later

Channel: Byte Legacy

Views: 29,975

Keywords: ui design, ui development, react, react development, dashboard, react design, ui ux, web development, web design, react router, router

Id: cFZ57R3H1GM

Length: 16min 21sec (981 seconds)

Published: Sat Jun 18 2022