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

[@jitengudhka4000]

One of d best and easy to understand material UI tutorial. Thank u for making tutorial on Material UI.

[@DarkVuderphlai]

I loved this tutorial. It was useful, it helped me with the task I had at work, and it gave with all the context needed. I especially liked how you kept refering to the official docs, and showed several ways to code the same result. Thank you!!

[@khandoor7228]

Anthony ... this is your best tutorial yet!! the real world example with how you would code this for real was exactly what is needed with these features. The Material-ui explanation is sometimes not sufficient and you made it very clear with real world, very thorough, good clean code! Awesome job, loving the 'with React-Router' subseries. Waiting for you to do the same with that Stepper . . lol.

[@arjunn3974]

The way you explained this is just Awesome... Keep going and Thankyou very much!!!

[@vijaykumarreddyalavala3713]

A month ago I searched for a video that clearly explains Breadcrumbs but I did not find it. But here I am today with a recently uploaded video that clearly explains it. Just right when I need it

[@anibalmarquez9480]

Oh man! If I had you in front of me I would give you a hug, you have helped me a lot with your tutorials 😄

[@vasileiosmpletsos178]

I was looking and couldn't find a good or an implementation that matches me requirments. But you did 100% and in so clean way. Great Job, subscribed!

[@sujoydutta920]

Such a great tutorial I was pounding my head on this...although a bit outdated certain things changed with react-router-v6 but the gist is the same. THanks a lot

[@juanfernando122]

de casualidad tienes como quedaria ahora que cambio reac router a v6

[@maddzkz]

@@juanfernando122 For v6 use the hooks: useLocation and useNavigate instead of withRouter HOC. You'll find the pathname in the location, and instead of history.push(path) just do navigate(path). Hope it helps!

[@arthurhovhannisyan31]

Anthony, we are with you! Keep going man!

[@pawarasiriwardhane7755]

The exellent tutor I've ever seen

[@gregduncan5993]

Fantastic series (so far)! Thanks for the great tutorials.

[@ianmacrae4090]

Great tutorial. How would you go about extending this to cope with params? eg /jobs/:jobid/details/:detailid so that the breadcrumbs would have home / jobs / detail with the link including the relevant parameter?

[@ravishchauhan1]

Thank you so much for uploading this video. this video was so helpful.

[@AnthonySistilli]

Glad it was helpful!

[@אביאמן]

Thank you very much, this tutorial was helped me so much.

[@jetmartin9501]

Thanks for breaking that down. Good stuff.

[@shawnjohnson3433]

Awesome!! Great tutorial. You couldn't of explained that any easier!

[@raptor312]

Great work !

[@hincha013]

Genius !!! This helps me a lot !!

[@srihari.lakshmanan]

Nicely Explained! Thanks.

[@ankitgiri6874]

Amazing tutorial, Thanks a lot 🙂

[@rupindamanalu8297]

Thank for this video content Mr. Anthony

[@AnthonySistilli]

Very happy it helped Rupinda!

[@kennethchinedunwobi1401]

Hi Anthony, I am still waiting to see the implementation of Hidden, I can hide a Grid on small screen view and make it horizontally scrollable on small screens

[@skily4866]

thanks for this guide, its so much to help me

[@onyebuchikingsley3172]

This is a great one! it solved my problem.

[@d.d898]

you made Material UI very easy!!!!

[@oiaraque]

Great tutorial, subscribed!.. if i'm using react-router-dom v6, how i can replace withRouter wirh hooks?

[@amanprit-kaur]

Great video! Keep up your work :)

[@ianmacrae4090]

Great video. Can you please explain how you would go about using breadcrumbs with route parameters. eg something link /user/:userid/detail/:detailid/preferences/:preferencesid. The idea would be to see in the breadcrumb user -> detail -> preference with user and detail going back to the respective user or detail information

[@sheisgabs]

you can use with router v6 the useParams(); const { user_id, detail_id, preferences_id} = useParams(); and create a condition to return null this values. something like: function valueIsParam(value: string) { return params.includes(value); } if (valueIsParam(text)) { return null; } and then you will have something like this: /user/ /detail/ /preferences/ / I dont know how to get rid of the slash symbol, but I hope it helps

[@elvin.mammadli]

Hi, great tutorial, but i use router v6, and it seams some things changed, i have problem with "withRouter" any short help if possible? Thanks anyway :)

[@kissshu]

great explanation. thanks for doing it. it really helped

[@Parth-lu8rr]

How do we handle the case when we have query params in the routes and, we are re rendering the component which has breadcrumbs. I am not able to retain the routes. Anyone!?

[@pets_talk]

It was super helpful!

[@seeramsumanth8409]

Thank you so much ❤️😊, it is very clear and you did break it down very well :)

[@meghalbisht6768]

already waiting for the next one!!!!

[@AnthonySistilli]

Haha I love the anticipation!

[@jacobnastaskin3544]

Kind of a dumb question here but how would you change the cursor to a pointer when it is over a link?

[@Shivashankar-ui8xi]

Will it work if we have components inside the folders?

[@onyebuchikingsley3172]

I discovered that my breadcrums actually worked as I expected but the component was not rendering. What could be the issue?

[@АнварАппазов-я1г]

Awesome! Thank you!

[@Kewledgykid]

Thank you, this was really helpful!

[@talhaahmed1116]

Thanks, you're the best!

[@austinejose1516]

Great Content, Thanks very much.

[@bowlshark1]

Great help man. tks

[@Eminence43rd]

But how about you want to go back to the previous link? and you have to supply an id in the link?

[@eric.m5790]

thanks man good video helped alot

[@Ymaryna]

Great video, thanks so much!!

[@joshsondera]

I have a problem with withRouter(). IT was removed in the latest version of react-router-dom. My whole project is already based on that version, so I can't change it to the older version. How can I still implement it in JavaScript?

[@davidlew4391]

How you fixed it bro?

[@rahulkulkarni9653]

Thanks 😊 it's really good

[@syamkishore9213]

Thank you bro. this made my day

[@cristiancb6148]

Thank you so much this really helps me a lot

[@alimoghadam6464]

this really helps. thank you 🙏🏻

[@amavictor2993]

Beautiful

[@yashmohod1278]

hi Anthony please make any demo project using material ui or suggest me that can help me to improve my skill of material ui and thanks bro love you you are best instructor

[@ankushsingh6668]

A great tutorial

[@khld4263]

Thank you 🥰

[@kevinma8227]

Hi Anthony your voice sounds a lot deeper, can you teach me how you create this effect?

[@AgustinAstronomy]

thanks for this video!!!!! you are amazing

[@AnthonySistilli]

Glad it was helpful!

[@stabbler]

Next video suggestion: badges and snackbars ;)

[@AnthonySistilli]

Oh very good idea!

[@ramijawadi4356]

withRouter is depricated :\ any solution plz

[@AndrewPetersen-ho6nk]

Not sure if you have figured this out, I just found this video today and came across the same issue. From what I was able to find, react now has hooks that replace withRouter. I am now working on using useLocation().

[@Circulate_Motive]

It is very useful

[@kristiankristiansen5603]

Hi Anthony, great content i'm a bit confused though. What if i wanted a top navbar that stays on all pages, how would i do that?. Like: HOME ABOUT JOBS Home / about This is the about page Can't seem to figure it out. Best Kris

[@AnthonySistilli]

I think I have a video on MUI headers (if not, maybe my pokedex example series goes through it) , but essentially with your header you just want to nest it in your top level component (usually app.js) so it's a sibling of the react router logic, so it won't change when a page does!

[@kristiankristiansen5603]

@@AnthonySistilli Great thanks!, i figured it out now, i was trying to use history.push in the nav outside of the Route, that did not work of course, i'll just use use Link from react-router-dom that works great.

[@saivivekravi4979]

Can you make mui-datables in react video please it is very helpful to many other

[@gregduncan5993]

Suggestion for other MUI - Footers and nav bars that can become hamburger menus.

[@naveenraj061]

thanks bro!

[@eseesela1]

Path names tend to be in unreadable format. There is a useful example in mui docs on how to replace pathnames with user friendly names.

[@mrgame6584]

May Allah reward you

[@slavik2927]

Thank you

[@DjellalAmina-y8e]

Thank uuu

[@nicolasaraya2919]

me salvaste

[@Jay-jo5dm]

leaving a comment for the youtube algorithm

[@BabarAli-yb1eg]

great

[@AnthonySistilli]

Glad you liked it Babar!

[@erkanisuf3604]

thanks babe , sryy i copy pasta it ot my project ;(

[@odocic]

all that code for this simple functionality -_-

[@Giorgi-ho8rj]

that's life