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
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.
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!!
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 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!
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?
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
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
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 :)
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
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
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!?
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?
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
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!
@@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.
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().
One of d best and easy to understand material UI tutorial.
Thank u for making tutorial on Material UI.
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
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.
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!!
The way you explained this is just Awesome... Keep going and Thankyou very much!!!
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
de casualidad tienes como quedaria ahora que cambio reac router a v6
@@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!
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 😄
Thank you very much, this tutorial was helped me so much.
Thanks for breaking that down. Good stuff.
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!
The exellent tutor I've ever seen
thanks for this guide, its so much to help me
Awesome!! Great tutorial. You couldn't of explained that any easier!
you made Material UI very easy!!!!
Thank you so much for uploading this video. this video was so helpful.
Glad it was helpful!
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?
Fantastic series (so far)! Thanks for the great tutorials.
Anthony, we are with you! Keep going man!
Nicely Explained! Thanks.
Amazing tutorial, Thanks a lot 🙂
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
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
Thank for this video content Mr. Anthony
Very happy it helped Rupinda!
Great work !
Great Content, Thanks very much.
Thanks 😊 it's really good
great explanation. thanks for doing it. it really helped
Thank you so much ❤️😊, it is very clear and you did break it down very well :)
This is a great one! it solved my problem.
Great tutorial, subscribed!.. if i'm using react-router-dom v6, how i can replace withRouter wirh hooks?
Awesome! Thank you!
Thank you so much this really helps me a lot
Thanks, you're the best!
Genius !!! This helps me a lot !!
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 :)
Thank you, this was really helpful!
Next video suggestion: badges and snackbars ;)
Oh very good idea!
It was super helpful!
thanks man good video helped alot
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
Beautiful
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
Thank you 🥰
this really helps. thank you 🙏🏻
A great tutorial
Thank you bro. this made my day
Great help man. tks
It is very useful
Great video! Keep up your work :)
already waiting for the next one!!!!
Haha I love the anticipation!
Hi Anthony your voice sounds a lot deeper, can you teach me how you create this effect?
leaving a comment for the youtube algorithm
Thank uuu
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.
Great video, thanks so much!!
I discovered that my breadcrums actually worked as I expected but the component was not rendering. What could be the issue?
Kind of a dumb question here but how would you change the cursor to a pointer when it is over a link?
Will it work if we have components inside the folders?
thanks for this video!!!!! you are amazing
Glad it was helpful!
May Allah reward you
Thank you
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!?
thanks bro!
Can you make mui-datables in react video please it is very helpful to many other
me salvaste
Suggestion for other MUI - Footers and nav bars that can become hamburger menus.
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?
How you fixed it bro?
But how about you want to go back to the previous link? and you have to supply an id in the link?
thanks babe , sryy i copy pasta it ot my project ;(
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
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!
@@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.
great
Glad you liked it Babar!
withRouter is depricated :\ any solution plz
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().
all that code for this simple functionality -_-
that's life