React Router in Depth #7 - Route Parameters

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
netninja.dev/p...
🐱‍💻 Access the course files on GitHub:
github.com/iam...
🐱‍💻 React Tutorial:
On Net Ninja Pro - netninja.dev/p...
On KZbin - • Full React Tutorial #1...
🐱‍💻 React Router Docs - reactrouter.co...
🐱‍💻 VS Code - code.visualstu...

[@maskman4821]

One thing very important Shaun forgot to mention is that there is naming convention in loader function, for example, if the route name is Career, the loader function name has be careerLoader() in camel case.

[@Simon-wi7vr]

Thank you! Does this mean each component can only have one loader? What if you want to load multiple data types into a single component?

[@omoleyeosadare5775]

@@Simon-wi7vr it is stated in the react-router doc that each component to it own loader function

[@andromilk2634]

So it would not work if the convention is not respected? Or it's just a question of style? Thanks

[@iLoveToLearn247]

Always saving lives with your great way of teaching. Thanks Shaun

[@rockbelleh6237]

Wow..my mentor i miss ur teaching tnks alot for this. U r gifted 😍😍😍

[@NetNinja]

It's my pleasure

[@kholaseerat2385]

Great and easy explanation. To the point love it thanku so much

[@NetNinja]

Most welcome 😊 thanks for watching!

[@darkooo94]

If I understand correctly, we actually don't need useParams hook in the CareerDetails function after we setup the loader and get the variables through useLoaderData hook, right?

[@hybs9473]

Question, why there's not a need to map the career that was fetched on the careerDetails.jsx?

[@chinmayghule8272]

@@hybs9473 The response only had a single person object.

[@ichiroutakashima4503]

@@hybs9473 exactly as what chin said. Basically, you selected an item, and that item is one object. Apart from the original list which is an array of objects.

[@reneehani434]

same question and I deleted and still works fine ...

[@Ahmed-fq3kz]

Yes, useParams and useLoaderData works dependently

[@ivan4486]

Great course! Thank you! I wonder how to show a preloader while data is being fetched.

[@bipulkushwaha1567]

Next Level, Just Great.

[@NetNinja]

Awesome, thanks! :)

[@ahmedserifoski5999]

you are THEE MAN !!!!!!!! 🔥🔥🔥

[@NetNinja]

Thanks Ahmed!

[@souviknag]

You just saved the day! Thanks a ton. Liked and subscribed

[@NetNinja]

Glad it helped :) thanks for subscribing!

[@souviknag]

@@NetNinja Since you have replied, do you have any course on UDemy or any other platform? Where I can learn more may be?

[@sabril.m8248]

thank u man im very greatful with this tuto

[@stefanmasic1287]

Hi. I used instead of "id" different field name (numofpage or stevilkastrani in our language). Nothing works. Then I change model in db.json (field name) and also fields in .js (App, CareerDetail). And YES, everything works. You stated that we can use any parameter name (for example "abc"), but just don't work. About video: GREAT! Best regards, Štefan.

[@jacobhagan553]

Please values are missing in careerDetails component when i select a career item. Could you please help?

[@ALotThx]

Thanks for this great video!

[@NetNinja]

Thanks for watching! :)

[@arazhamid]

I appreciate it 👏,so Why does it give an error when I use career.name instead of career.id?

[@qiuzhi99]

using antd pro?

[@LonBorey]

How do we use JSON-server when we deploy the project to the hosting server?

[@arjunrajeev469]

I believe json-server is only used to mimic a real-world REST API which returns a JSON response. In reality, you will substitute the localhost:4000 URL with your API endpoint URL.

[@philippe4368]

How I can pass the entire object as parameter, instead only ID? That way I would not need to fetch API again if I have already the data.

[@omoleyeosadare5775]

Read the react-router docs. your are suppose to give each component it's own loader function

[@catalinbanici3357]

Can I get a single object from an array of objects without fetch and loader functions?

[@ajaykumbhar6919]

Use fetch and loader function in the parent component and pass each object as a prop in the desired component

[@benyamin4634]

awesome thanks

[@Ahmed-fq3kz]

Awesome

[@michalnowak2181]

thx

[@Sameh_ElGazar]

can someone explain the careerDetailsLoader func (passing the params obj to it) 05:00

[@omoleyeosadare5775]

This ":id" is called dynamic url. careerDetailsLoader it helps us in loading data into a component before it render unlike useEffect(). in this case to associate each career to it's dynamic url, we need to call params object as an argument to the careerDetailsLoader so that when we go to a certain path=":id" on or browser we would get the corresponding career.

[@mohamedyoussef8835]

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

[@xanny9849]

when will be next lessons uploaded?

[@NetNinja]

I'll be uploading again daily from Boxing day (26th) :).

[@elvisadesese2842]

I need a career change to get career change. That is why I am following this channel

[@NetNinja]

Awesome, welcome aboard and best of luck on your journey Elvis! :)

[@yourSOULismy]

Why you added toString() for career.id in the Link? It works without this. I checked in console.log and it return just a number without convert. It matter in url that you use string id than number id? in CareersDetails you left id with useParams but it's not used in this file. Is it required for something?

[@chinmayghule8272]

JavaScript coerces types implicitly. If a string is being concatenated to a number, then the number will be implicitly coerced into a string and then both the strings will be concatenated.

[@ichiroutakashima4503]

Unless you're using typescript. Link's "to" property actually needs to read a string, hence conversion is needed.

[@orangeblossom9968]

but doesn't interpolation make its content a string automatically?

[@cartermah5165]

Following through this tutorial now and am not getting the right element in the array from the API? Eg: Going to careers/3 ends up showing me the 4th career in the array instead of the 3rd career- which is the one that has id 3. Any ideas?

[@josegkurszewski8363]

Wow, you are the man!! This course is what I needed to fully understand React Router DOM. Perfectly explained. Thank you very much. I really appreciate the time you put into creating these videos. Thanks for sharing this valuable content. 😊

[@marianaangel5338]

I am the first to watch it!

[@GethushanRavichandran]

Please create a Playlist about "Creating E-Commerce Website using Strapi , MongoDB, React , and Stripe"

[@marianaangel5338]

Could you please make us a playlist of Nextjs integrated with Redux?

[@muhammadfahad9330]

sir I love the way You teach i just wanted To ask That i Am currently Learning Flutter From your youtube channel. First i have to learn Flutter For Beginners playlist and than Flutter with Firebase Right? These 2 Playlists are enough To learn Flutter? kindly Ans I have texted You on Instagaram as well but u didn’t respond ? waiting Kindly tell me the roadmap of Learning Flutter

[@maskman4821]

You can learn it from chatGPT, It is good especially in coding and programming, just ask any question and you will get the desired answers you need and want 😘