React & Material UI #22: Breadcrumb & Breadcrumb + React Router

hey everyone in today's video we're going to be going over the breadcrumbs component for material ui and how to use it with react router if you're not familiar with what a breadcrumb is it's essentially this sort of url structure that you might see on a lot of different sites i mostly see them on things like wikis and documentations but essentially it will show you where you are relative uh to the rest of the site so for example over here in this lumatol ui example we're pretty much on the matilda ui site slash the core component slash the breadcrumb component it's not the best example but don't worry i have a really nice example prepared for you in code sandbox that i'm going to show you how to use it really really cool and as always if you enjoy this video please consider liking subscribing and leaving a comment um we've gotten so many comments i'm trying my best to respond and at least read every single one of them um and you guys are absolutely amazing i really appreciate the feedback um i i can't tell you how much it's helped with the channel and getting the channel out there in the youtube algorithm i'm absolutely uh super floored and appreciative of all of you guys for all your uh support um and it really means a lot to me so thank you uh everyone who's been watching these videos and learning about material ui and i'm really hoping that the content helps um so without further ado let's get into uh this breadcrumb so essentially we talked about what the breadcrumb was now if we look into the code of the breadcrumb uh it's sort of nice and simple this is the simplest example matilda y has of their breadcrumb and you can see here the breadcrumb starts over here with the opening tags of the breadcrumbs component like i talked about in one of my other videos the area label is mostly for accessibility so um for now you don't really have to worry about that but that would be for example if someone is using a screen reader or they were using some other way to navigate the site other than let's say for example just using a standard mouse um that aria label would uh to a screen reader when they hover their mouse over it would um say breadcrumb um so the person would know where their mouse is um and then in here you can see it's sort of just hard-coded um every single element you see in this the breadcrumb is sort of hard-coded we'll see here that the first two things in our breadcrumbs are both links um and that's why that's where these two link components come from so we have one uh that uh displays the material ui and then we have another link component after that which shows core and then at the end we have some typography that says breadcrumb and the reason you generally want typography uh as the last element is because if you're already on that bread if you're already on that page where the last component is clicking it's not going to bring you anywhere differently so it doesn't really make sense to have it as a link and you'll see here in the material documentation the way you get from one place to another is they have it as ahrefs so when you click the first one it will lead you to just slash the second one will lead you to the um slash getting started page um and that's not really friendly with react router so in our examples i'm going to show you how to sort of do it without using ahref and then you'll see they also have an on click it doesn't really serve to do much other than uh write a console log you clicked the breadcrumb and they have this event dot default prevent default here so that when you click it it doesn't actually use any of these uh href tags so it doesn't actually bring you off the page um if you're not familiar with prevent default it's essentially what it does is uh when you the on click will trigger before this href and um it will prevent the href uh from actually triggering um when you have uh prevent default here um so just for example purposes they added that in there you would probably never have something where um one of your breadcrumbs would have an href and an on click it would usually be one or the other depending on whether or not the link is linking to something on your site or something away from your site if we were to look at some of the later examples you can see most of them are just essentially things to do with styling so for example active last breadcrumb you can see here that the only real difference is it's a link and they change the color of this link so it looks like as if it was just a typography text if we scroll down you can see you can add custom separators so there's actually a prop which we'll look at in just a second but that prop um for the separator you can pass in actually a note so this could be an icon this could be a text this could be whatever you want and it'll change what is separated so usually by default it's just a slash because here they have it as a little arrow a dash or a big arrow um which i believe the big arrow is probably yeah an actual um icon itself so you can add any icon you can even add like a poop emoji if you really if you really wanted to um here you can see all they're doing is they're adding an icon in front of some of the breadcrumb names and this is pretty straightforward all you really do is inside of the link you would just add the icon component before the actual text or after the text if you wanted to be afterwards so i think that's sort of straightforward now this collapsible example is sort of a weird one let me refresh the page i could have just hit the refresh button but um if we scroll back down you'll see the collapsible one i don't see it being used unless you have a really really big site but essentially what it will do is it will collapse the intermediate steps the intermediate uh crumbs within your total breadcrumb and when you click it it'll expand the entire path for it um so unless you're making like some sort of big documentation where you have some really heavily nested stuff in there i'm not sure you'll be using that too much so we won't go too into it in this video and once again you can sort of customize your breadcrumbs uh to look however you want so in this case they created a new component called style breadcrumb and essentially all it really is is they took materialized chip component and sort of uh just use that instead of a link or typography as the breadcrumb um they have an example of integration with react react router but as you can see it's not the simplest thing and that's why i really want to do this video because um for one of my personal projects i was using react router uh with breadcrumbs and their example is not really uh the best uh example of how to do it so i'm gonna show you guys a bit of a easier way to do it than all of this code and finally if we look at the api just going over some of the really important um props you can see here they have the collapse props so you can see exactly how to use that sort of collapse you set the amount of numbers you want to see after and before the collapse the max items that will show up as well and then separator which we talked about which is a node that you can sort of just pass in a custom element so let's go into the example i've built for you guys so if you remember watching the drawer video i had sort of an example with um react router uh for the drawers and i've sort of taken that same example right now there's nothing uh other than react router implemented here so you'll see here in our index.js we're taking browser router as react router and we're just wrapping it around our application um if you're not too familiar with react router i think i have a video on it in my react series so you should definitely check that out but essentially in our app all we're doing is we have a switch statement and pretty much what's happening is um if they go to slash which is what you see here here now they get the home page and on the home page we're gonna have two buttons one that goes to the about page and there's nothing really at the about page and then one that goes to the jobs page and then for the jobs page so i'm just pretending this is like a business's website or something we uh have a couple buttons showing the available jobs so like if you want to apply for a job as an engineer you would click this and it would bring it to the engine job engineers page if you want to be a marketer job slash marketer and then finally designer it would take you the job designer so that's all that these routes are really setting up um you know in our like actual uh components there's nothing really notable in our home and our jobs components that are just buttons that will history push to your um slash job slash engineer jobs marketer etc etc so let's go about building a breadcrumb structure for this site so that whenever um wherever we are on the site it will show us uh where we are and sort of like the hierarchy of where we are as well as if we were to click on a breadcrumb that was you know above the page that we're currently on it'll history. push us there so the way i'm going to do this i'm sort of going to do this as if i were trying to do this myself like um if i were sort of new to material and i was trying to do this the first thing i would do is i would go to the absolute simplest example possible and i would probably copy and paste that into my breadcrumbs component so i'm gonna you'll see um in my app.js i'm already importing the breadcrumbs and i'm just gonna keep that at the top level of the application right now there's nothing in the file so we're going to get an error but as soon as i paste this in you'll see that um what we are going to have is we're pretty much going to have all the same stuff we had before except now we're going to have the breadcrumb at the top and right now it's just the materialized default breadcrumb so i'm gonna do a bit of cleaning up here for the imports uh first of all what i wanna do is i'm gonna um import i'm gonna alias this breadcrumbs because my component is named breadcrumbs so i'm gonna say breadcrumbs as mui bread crumbs so i don't get any um any errors there then i'm gonna replace that here i'm gonna place that here i'm going to turn this into an arrow function and rename the actual component so i'm gonna be so i'm going to say const bread crumbs equals and turn that into an arrow function and then down here i'm going to export default bread crumbs okay um then i'm going to move all of these imports into uh the same line just to keep things a bit cleaner and i'm gonna get rid of this stuff here and i'm gonna get rid of this handle on click function and gonna get rid of the links and the on clicks uh that they sort of um the hrefs and the on clicks that they had in their examples so what i've done is i've sort of just uh taken the component and i've broken it down into a far simpler state something that is easy to work with something that i don't have to worry about much much of like the default code or anything like that that they added in anything i don't really understand or don't need is essentially gone now the first thing we want to do is we want to essentially we are going to need to modify what links we are going to have here depending on whether on what our path is and in order to get our path we can use a higher order component called with router which will give us access to the router prop so i can say with router pop that in here and now what i'm gonna do oh it didn't auto import let me just auto import that so you'll see this comes from react router dom and what this will do is if i were to now taken props and console.log my props for this component you'll see here that um once i refresh the page you'll see here that my props now have these three items in here i have history location and match i think static context is probably just some random stuff from code sandbox but these three come from uh react router if i were to we're going to be using history to do something called the history.push which will re-route us to a different link when we get there match is more for parameters so if you ever pass in like parameters like in my previous couple of videos you will use that but what we're really going to focus on here is location and inside of location we have this object this variable called path name and that will show us what our current path for the application is and we're definitely going to need that so for example if i were to go to the jobs page and then go to designer we can see here that our path is pretty much job slash designer if i were to go into our props again look into our location and look at our path name we can see it's slash job designer so that's exactly what we need because that is what we want to display over here so the first thing i'm going to do is i'm going to destructure this item from our props so we have access to it so i'm going to say const and i'm going to do some destructuring i'm going to say um we're going to need uh first of all history and then we're going to need location from props and then out of location out of location we're going to be taking a variable oops we're going to be taking a variable called pathname out of location and this is how you would do it if you wanted a destructor so now i'm going to console the logger path name and you can see here since we're on slashjobs.designer our path name is slash jobs designer now another shorthand the way you can do it um that i didn't want to confuse anyone by doing it first is you can pretty much just um another shorthands you can actually destructure twice so because i'm taking path name out of location i can say colon and then add another pair of squiggly brackets and put path name here and it's sort of just like a little shorthand um to save a line and you'll see here i still have it and if i were to go back to slash for example home you'll see here the path name will just be a slash if i were to go to about it would be uh slash about and then i come back to slash i go to jobs and if i were to go to marketer you can see here no matter what page we go on our path name is going to take that out so now we want to programmatically add a link pretty much for every single item in this path name that are separated by these slashes so the way we're going to do that is we're going to do a bit of javascript magic so the first thing i essentially want to do is i'm going to create an array and that array should have every item um that is going to be within our actual uh that is going to be within our actual breadcrumbs um the first breadcrumb is always going to be the home page so we don't have to programmatically add that in we can just hard code that in but for everything else we want to programmatically add it depending on our array so what i'm going to do here is i'm going to create an array and this is similar to what they do actually on the documentation if you scroll down a bit to the react router example you'll see here that what they do is they are actually creating an array called path names and they're taking pretty much everything that is in the location's path name that comes from react router they're splitting it based on the slashes and then they're filtering it and i'll show you why you got to filter it so let's do exactly what they've done we're going to say const path names is going to be equal to our path name dot split and we're going to split on that so now if i were to console.log path names you'll see here we have an array that has an empty string and then jobs and marker and the reason it adds an empty string is because when you split a string we're splitting a string based off of this slashes and right now that string looks like this it looks like jobs slash marketer it organizes everything in an array depending on those strings so everything before and after the slash will be an item and before this slash while there may seem like there's nothing it's actually an empty string so what they added the filter there for is so that it gets rid of this empty string in the array so they dot filter and then they just say x to x and what that'll essentially do is it'll make it so that anytime x is undefined which an empty string is technically in the case for filter um it will not append it to the array and now we have a clean array with just uh the names of the actual things that are in our path so now the next thing we're gonna do is let's hard code our homepage let's get rid of this stuff everything um other than our home so we're gonna add home as an item here uh the color can be whatever we can delete that for now we'll just make it a regular link um and for the on click for on click we're gonna just have a function and what that function will do is it'll just history.push to home history dot push to slash so now let's go to for example we're on job slash marketing if we were to click that it'll bring us back to slash essentially so that is our first breadcrumb the rest of them we're going to do programmatically with this array and you'll see here since i'm already on the on slash if i were to try and click it it wouldn't actually uh do anything because we're already on that page so now what we're going to do is we're going to map through every single one of these parameters in our path names so we say path names dot map we can we're going to need the actual name which is pretty much the object as in the array and then we're going to need the index and i'll show you why in just a second so now if i were to um we have here pretty much um whoops i forgot another bracket here and then another bracket over here closing bracket over there cool so now if i were to um for example uh have a basic link so we're going to copy this structure except instead of home i'm just going to have the name here you'll see here depending on where i am it'll automatically add those there so for example oh and we can we have to wrap this in a return there we go so now you'll see here if i go to about we'll get home slash about and if i were come back and go to jobs you would see i would get home slash jobs and then if i were to go to for example engineers i could home touch outside engineers so now the next thing we need to do is make it so that when i click on for example jobs it'll bring me back to jobs we want this onclickhistory.push to actually go to whatever the path is up to that point which is a bit tricky but it's nothing a bit of javascript magic can't solve so if i were to um come up over here i can say for example const um and let's say uh push2 let's call it push 2 or route 2 and this is essentially what we want to route to when the thing is pushed what we can do here is we can say pretty much we want to go to our path names dot slice zero to our current index so pretty much everything in our path names array to the current index so i'll do index plus one dot join and we want to concatenate them essentially by um this slash and while that may look a bit tricky i'm going to break that down in just a second so that history.push we can um replace that with route 2 and what i'm going to do is i'm going to console.log just so it's a bit easier to understand let's console log uh some stars so that we can easily distinguish where we are and i'm going to console log the name and also the route too so now if i were to refresh this let's go back to the actual jobs breadcrumb the jobs page and we can see here when we're on the jobs uh the job slash designer which we can see from here the route 2 is now this slash job designer what is essentially happening is and if i were to reiterate what the um path names array is and then we'll scroll down a bit okay so essentially when we are on the design the designer breadcrumb we want our path to have a slash at the beginning and then everything that comes before it um will be there as well so for example for our designer we want our link to be slash the thing that came before the thing that came before it and then the current thing that we're at so when you do dot slice um what you want to do is you put zero to denote that you want to start from the start from the beginning of the array and if you're not familiar with slice essentially what it does is it creates a new array based on an original array it allows you to like for example cut out a part of an array and in this case what we're doing is if i were to open paint it might be easier to explain um in this case what we are doing is we have like you know something over here we have a string over here and let's say we had another string over here we want our path to be starting for the first element we only want it to be over here for the second element in our breadcrumb we want it to go from the beginning to the second element and then the third one from the beginning to our final element and by starting our slice at zero and then going to wherever the index the current index is plus one um because slice is non-inclusive um that's how we get it to include only what we want in there so for example if i were to go back to jobs you would see here that our path to is only the initial slash and then our slice from zero um essentially to one because jobs is the first thing in the array so the index there is zero and because we're doing index plus one that our slice will be from zero to one and because it's non-inclusive it will only include the zeroth element which is why we get that if you're still a bit shaky on that i highly recommend looking up how slicing works um the slice function in javascript works but that is my best explanation on what they are doing with that and that is essentially um all you really need to do to get this in a working a bowl spate state now all we want to do uh the final thing we want to do is we want to make it so that the last thing will never be a link because um like i said uh linking to something that's already there doesn't really make too much sense uh because you're already on the page it's not gonna do anything when you click it so we're either going to want to return pretty much the link or we're going to want to return the typography depending or not if the element is our last element in the breadcrumbs so what we can do in order to do that is we can create a variable called is last and we can pretty much make it equal to whether or not a boolean so this will be a boolean if our index is equal to the path names array dot length -1 and this will give us whether or not the breadcrumb that we are currently displaying is the last one so then all we have to do is if it is last instead of displaying this link we are just going to display typography and we can put the name in there instead and there we go the last thing will always display is a typography without a link other than home because we hard coded that i personally if you really wanted to um you could check whether or not the path names array so if you wanted to make link typography sorry if you want to make the home a typography instead of a link if that was the only thing there all you have to really do is check whether or not this path names uh array is empty or not so we can do that right now so i could say path uh path names dot length is greater than zero if it is then we do we pretty much display home like that otherwise and we have to wrap this otherwise we can display as a typography and say home so it's almost the same thing um let's see oop i forgot the m in path names and all right since we're on home uh it displays a typography then as soon as we go to jobs um you might get this console area saying everything has to have a unique key so what you can do here is you can just set the key equal to the name um unless two of your breadcrumbs will have the same name uh oops you gotta do that inside of here like that just add that there let's delete those and there you go whenever our home is the last thing it'll display is just a non-clickable link and everything that's at the end of our breadcrumb will not be clickable and you can sort of navigate the site like this and that is pretty much it um the code sandbox link for this video will be in the comments as usual and once again if you found value in this video please consider liking subscribing leave a comment really helpful the youtube algorithm i love your suggestions and your feedback and i hope uh this video was sort of clear i know there's a lot of javascript specific stuff in here but um i hope i broke it down to a level that it isn't too complex anymore and yeah i hope everyone stays safe and thank you for watching

Channel: Anthony Sistilli

Views: 16,468

Keywords: Material UI, Material UI React, Material UI React tutorial, Material UI React example, Material UI Breadcrumbs, MUI React, MUI React Breadcrumbs, MUI react breadcrumbs example, mui breadcrumbs example, Material ui breadcrumbs react router, mui breadcrumbs router example, mui breadcrumbs react router tutorial

Id: n9kn8yQPC4E

Length: 25min 49sec (1549 seconds)

Published: Sat Jun 13 2020