React Router in Depth #9 - Making Breadcrumbs (useLocation hook)

[@MentorAliu]

just a tip, when you filter an array and want to remove all falsy values which in this case empty string is false, you can do this .filter(Boolean)

[@aytachchakif6327]

Thanks Shaun for sharing these tutorials with us, i really appreciate them. You are our brother from another mother 🍻

[@Mognatti]

way easier than I thought that would be. nice job!

[@nganji7932]

You really teach so well and so clear! Thank you

[@NetNinja]

You are so welcome! :) thanks for watching

[@adarshkhatri993]

Your videos are pretty explanatory and helpful in real world example.. Thnx for making this video...😊

[@NetNinja]

Most welcome 😊

[@rockbelleh6237]

My mentor n teacher tnks alot ur channel has reli impacted my life.please continue the good work.God bless n up lift you continually.Amen 🤗🤗

[@NetNinja]

It's my pleasure :) thank you for the kind words!

[@Hacking-NASSA-with-HTML]

Thank you so much, sir, for all of your efforts and awesome work 🤝👍

[@NetNinja]

You're very welcome :) thanks for watching!

[@arturoordonez-hernandez8750]

Thanks! This was very helpful (as are a lot of your videos). For what I'm doing, I had to end up adding an array prop to my Breadcrumbs component so some Breadcrumbs just display as text since their links just go to a blank page (they refer to a component dependent on parameters that sometimes doesn't exist).

[@akhilgannu3239]

How can we change the name of the crumb because the name is coming from the url itself but want to have a different name

[@khangmach01]

Thank you for your videos. It helps me alot

[@NetNinja]

That's awesome to hear :) thanks for watching Khang!

[@miloman1995s]

you save my life, thank you mate

[@NetNinja]

[@g10-you]

always excellent. Thank you so much.

[@NetNinja]

Thanks for your support :)

[@ahoymatey1234]

another great tutorial series!

[@NetNinja]

Thanks Andrew!

[@zachariayussuf7652]

Love your content . Great work as always . I have one question though . Why didn't you use useState to hold the currentLink state, Isn't that what react is all about(not mutating variables(values) directly) ? Sorry English isn't my first language. I really love your content . You are gifted when it comes to making complex things easy for everybody .

[@SarirkKarim]

shaun sir if i try to print title in breadcrumbs that prints the encoded url how could I just print the text from url?

[@Venthyrus]

it's an amazing content, I hope one day I can be as successful as you.

[@silky2282]

hi shaun! i just wanted to ask you if there will be any new next js 13 course

[@radosawweidemann4944]

there should be += and I see =+. I see it's working you but me working only second option

[@paulinapiatek8406]

Awesome work! 👍

[@NetNinja]

Thank you Paulina! 👍

[@omarr03]

how can I access objects of json server using slugs?

[@bikramchettri9405]

Can we do go back?

[@ibrahimshaheen8572]

dear there is one problem on links for example if we in help page then click on contact us the breadcrumbs will bet help > contact if we click at contact at the breadcrumb component it will direct to 404 page and the url will be helpcontact

[@vladislavgorovenko]

export default function Breadcrumbs() { const location = useLocation(); const currentLink = location.pathname .split("/") .filter((item) => item != "") .map((item, index, array) => ( {item} {index === array.length - 1 ? " " : " - "} )); return {currentLink}; }

[@vladislavgorovenko]

That's how I solved it 👆🏻Just ignore tags, since I used Chakra UI

[@kevinnp6467]

Makin camuh asli

[@viewvue3744]

can i ask you: what is differences between navlink and link in react router ? thank a lot

[@frogGames]

navlink will just add an active className to the current link that is clicked otherwise they are the same

[@anmastery]

navlink give you active class is usefull if you want add some conditional and Link just like a href also not give active class

[@annametel8627]

Thank you ❤👍

[@NetNinja]

You're welcome 😊

[@rfryanfavour4369]

I've told my friends 👥️️👥️️ b4 but ill say it again. If you weren't a developer a lot of people won't stay developers cause theres no one to hold their hands🤷🏿‍♂️

[@ianiketjain]

Lovely ❤

[@mohamedyoussef8835]

Awesome video +++++++++++ 😀

[@prashantpatel6334]

Not working for me

[@steftrando]

Ok this is good but definitely wouldn’t do this in production. Each segment of the path needs both a URL and a title, since you wouldn’t make the url title the url itself but something more styled. For example you wouldn’t use the url flight-tickets you would make it Flight Tickets. Where would you get that data from? Each layer will have a different source of data

[@michalnowak2181]

thx