React Router 6 - Tutorial for Beginners
HTML-код
- Опубликовано: 13 июл 2024
- Learn how to use React Router V6 in this crash course for beginners. React Router is the most popular way to add page routing in React Apps. It is used very frequently in React projects.
✏️ John Smilga from Coding Addict created this course. Check out his channel: / @codingaddict
💻 Source Code: github.com/john-smilga/react-...
🔗 React Tutorial: • React Course - Beginne...
🔗 React Projects: • Code 15 React Projects...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) First Pages
⌨️ (0:11:01) Page Components
⌨️ (0:15:47) Link Component
⌨️ (0:19:39) Error Page
⌨️ (0:22:39) Navbar
⌨️ (0:24:39) Nested Routes
⌨️ (0:29:39) Shared Layout
⌨️ (0:35:58) Index Pages
⌨️ (0:41:43) NavLink Component
⌨️ (0:49:02) URL Params
⌨️ (0:55:56) Single Product
⌨️ (1:01:36) useNavigate()
⌨️ (1:09:49) Protected Route
⌨️ (1:13:52) Refactor
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
John is so good at teaching! Thanks to him I landed my first job as web developer! :3
Same here 😊
Wow, congrats!
I totally agree.... and congratulations, man.
Good to hear that, congratulations.
Can you share how can I connect with you?
Best react router v6 explanation that i had ever found on internet. Binged watch this whole video and it was absolutely worth it. Thank you John for making react router v6 easier.
I took some time away from React, came back, and was having tons of problems with the new React Router 6. Following this tutorial fixed everything, thanks so much.
I watched lots of videos, but whenever I watch John’s videos things are so much clearer…. Thank you for all the time you have put into these videos… Will definitely send a big one to you….
This is the best React Router course i have witness. Very concise and straightforward :)
Absolutely one of (if the not the best) I have viewed! Thank you.
Amazing job! Thank you so much for this awesome content. Props to John for teaching this topic. I appreciate your effort.
Love you John ❤. One of the biggest reasons that I have started working as node.js developer is you John ❤.
Great tutorial! Thanks for teaching react router v6 so clearly!
Awesome tutorial. Most courses are yet to adopt to React Router V6. Thank you, John.
Thank you for your work. Awesome explanation of each detail !
Perfect explanation pace! Thank you John!
Amazing tutorial! Exellent work, guys!
Another project from John. Thanks man.
So simplified, thanks for the great tutorial❤️
You published this the day after I learn React Router 6...
Thank you so much john for this amazing tutorial !
Best explanation about react router I saw, thank you for this John !
Looking forward to this tutorial!
This is very well taught. Thanks for making it very clear.
always waiting for video 💗💗💯
Thank you John for awesome tutorial
Thank you so much, John Smilga!
The course is awesome! 🔥
I was going to learn this tomorrow morning and somehow youtube recommended it to me🤩🤩🤩
I'd have given this multiple likes if it was possible. Top work John.
宝藏博主！我挖到宝了，好清晰的教学呀，爱了爱了🥰
Thanks a lot John.
I'll be so glad if you release a NextJs course
Wow. Its great one .❤️
John Smilga does it all... with STYLE! =)
This is a great resource. Wow! thank you
Thanks man you re the best teacher i ve ever had
Finally, the video i have waiting for
Great piece watching from Nigeria 🥰🥰👍👍
Thanks for video!
this tutorial is very concise, tk u teacher!
OMG guys this is sooo nice, thanks to this channel
I just got the explanation. Thanks 😊
Just awesome!
The Simplicity is Amazing
Thanks for video!!!
thank you so much for video tutorial , it really helps me to understand react router dom v6 )))
simple and great tutorial
Perfect, thanks;)
Thank you I learned a lot, you helped me a lot. Godbless Sir and the free Code Camp
Thank you so much, this solved two issues ive been having. I feel dumb lol
Thankyou for sharing the knowledge.👍👍
Amazing content!
Just amazing
Excellent
finally a good teacher,
thank uo so much
Done and Dusted. React Router V6 understood !! Roger that sargent
This is a very very good video!
Please make a full course on typescript beginners to advance level
Great!
Thank you so helpful
That voice .. I can recognize it anywhere! hahah. Awesome video!!
With subtitles, Thank you FreeCodeCamp
John f. DOE! Cant miss you teaching code.
such a great content leave more ducking likes
Very good 👍👍👍👍
thank you
Awesome tutorial! Noob question. Once on the single product page, how would one button click through all the available products? Would that be slider functionality or still routes?
Thanks this
Pretty good tutorial!
Also, I have discovered, several voices in English make me fall asleep, I don't know why, I've found a few channels that produce that effect on me :|
I also have the same problem .
FINALLYYYY
i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head
Every v6 tutorial is lacking the searchParams part of it. I feel that is the most important part. There are only few tutorials on that
Scrimba has included searchParam in detail .
Today I am struggling with routers and then I found this
Hey is the on refresh action giving error because the user request is sent to the backend handled here?
For some reason on the home page/shared layout page I can't use any of the navigation links I can't click any of them and their styles on active and hover don't seem to be applied. If I open up the dom though I can access them by just clicking and if I go to one of the nested pages. the navigation seems to wrok again
Angular tutorials❤❤❤ please🤩??
Please post a nuxt js course ...plsssss 🙏
If you are finding your NavLink component is always highlighting 'home' as well as the current page, you can fix this by putting 'end' on the end of your Home NavLink opening tag.
i.e. (isActive ? "link nav-link-active": "link")} to="/" end>Home
Thanks!
saved my day. I was trying to debug this
Thanks a lot man
El Reacto of the JavaScript Cartel
👍
hey, cool video!
Im new to react and got a little confused... can we simply not use NextJS for this? It comes with other features too
React is where you start before learning Nextjs.
Please what if the data is coming from a server? How do I pass it from Products page to product page?
How does he iterate over the object at 59:00 min? I got an error that " map is not a function"😕😔
Hi John, I really appreciate the way you teach, but I think you are not showing us the real webpage that is the product of the code on the left side, Pay attention to @10:26 "Testing" in the browser and "testing" in the code, how come this be so?
when we change the url after login , since he is a user he must be able to navigate to other pages , how can i achive this feature?
48:16 May I know why you have "link active" instead of "active" in the first condition of your classname?
i had to watch over a few times to know, so "active" is default styling provided by react-router, so when you want to style it yourself with custom colours your can create a class name in your css and name it whatever you want , he just named it link and added it to active, thats why he wrote "link active"
sotis when the sample finishes playing it will play over itself and you get tNice tutorials echo effect.
can someone explain to me
if i learned React Router V6 why would i need to learn Next.js ? Can someone tell me the difference?? i never dove deep into Next.js so i dont know if there is a secret trick Next does im just wondering
what you do with React to configuring your own routes , with nextjs , it does that for you out of the box, nested routes might be tricky with React router but nextjs You can just put those in a folder and use index.js as the parent
React Router updated their lib
44:05 for some strange reason my Home Link is always keeping the active class.... cant figure out why
Found the solution actually in the React Documentation, maybe it has changed since you've been recording this. You just have to add the word "end" just before you close the opening NavLink Tag like so:
This way it will work
@@martapfahl940 Thanks
Mind grenade
- John Smilga
how to create the initial project and how to run it? I clone the github but I can't run it.
I tried npm start, but it shows:
'react-scripts' is not recognized as an internal or external command,
operable program or batch file
Thanks,I got it.
Barak Obama teaches React Router.
Can you give me something like spotify with flutter?
The image links to cloudinary in data.js does not work anymore :/
Now they work again :)
😃 I have just completed this tutorial and now i confidently say that i know react-router-dom uses.. Thanku john smilga and whole FreeecodeCamp team...
Hey John, v6.4 changed the rules
Can someone please summon me or when there's a tutorial for Redux without TypeScript
React Router tutorial: switch to NextJS.
TypeError: setUser is not a function
Error in Login.js in string - setUser({ name: name, email: email });
Can anybody help me? Maybe someone stuck on this too.
How can the title be changed?
link #page single page?
really good content, but too much back and forth on the md file