React Router 6 - What Changed & Upgrading Guide
Вставка
- Опубліковано 3 лис 2021
- React Router v6 (stable!) was released and it's a great improvement over v5! This video covers all the important new features AND dives into selected example apps that will be updated from v5 to v6.
Learn all about React with my full "React - The Complete Guide" course: acad.link/reactjs
Examples Code:
First example v5: github.com/academind/react-ro...
First example v6: github.com/academind/react-ro...
Second example v5: github.com/academind/react-ro...
Second example v6: github.com/academind/react-ro...
Full project example v5: github.com/academind/react-ro...
Full project example v6: github.com/academind/react-ro...
Join our Academind Community on Discord: academind.com/community
Check out all our other courses: academind.com/courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
As usual, you do the heavy lifting for us and save us a ton of time. Thanks, Max!
Really great to hear that, thank you!
When the front team at my company needs to learn a new skill or just needs to refresh on a rusty one, we usually say "Check one of Max's courses, he prob. has a good one on the topic".
We are really grateful for the amazing, well structured easily approachable teaching content.
Max, you are hands down the best teacher for programming. So easy to understand and whenever you upload I know its quality content and learning is gonna be a breeze. Humblest thank you for your work! ❤️
That's just amazing to hear and honestly means a lot to me! Thank you so much!
Max is Sal Khan of React.
1.000.000.000 % Agree.
@@b4lax That's equivelant to 1%, meaning you 99% disagree.
@@Seeking_Solace lol
Thanks a million, Maximilian, for an excellent update, always coming up with a clean and clear explanation as you always do in your courses.
Thanks Max! I was reading React Router's documentation yesterday and was super confused. Very clear now.
Really great to hear that! Thank you so much for the nice feedback! :)
Fan of your work Max, I love how easily you make us understand these complex things.
Thank you for updating you React course which I have enjoyed a lot! These changes make the code a lot leaner! Thank goodness 'exact' was removed, it was a bit confusing.
I've come back to this video several times, it's a lifesaver! Thanks!
Thanks, man! Helped me figure out how to fix my very first independent project. Not hired yet, working on some projects to get my portfolio some meat! Thanks again!
Thank you very much for this awesome video.
as a little point for relative Links in Routes:
if you start the "to" with '/' then it will be relative path
but you can use absolute path for it to navigate to another Route in the app
Thanks Max for such a clear and concise upgrade guide it really helped me a lot. Awesome as always.
Such a brilliant and to the point explanation.
I learned react native from you and now react router explanation is superb.
Helpful. I did fall in love with your React course
oh, Max, you just saved my day, I upgraded to V6 a couples hours ago, and feeling frustrated with those red errors. I learnt a lot from this video, thanks.
I was watching the "Adding Routing" video in your Udemy course and I got the "wrap your in a element" error, I tried to fixed it and found that you've already uploaded this video :D, you are the best Max! Greetings from Argentina.
Thanks, Max, I had purchased your react course on Udemy, your course is absolutely the best I had learned!
It really helps my job! Hope the detailed react-router v6 course will be updated to the paid content soon.
Thank you max for going through this, I've got all your courses on udemy and love your content. One of my fav dev heads you are.
Excellent!!! I am actually loving the changes! (Having to update a full project here, but nothing that CTRL+Shift+H did not solve it quickly like replacing SWITCH to ROUTES and REDIRECT to NAVIGATE). The new syntax for the elements within the ROUTE is much better, as well as no longer needing the EXACT statement).
This video is a piece of gold, it's rare to find videos that cover everything 💚
I was thinking to upgrade my current project to react router 6 but was super confused. You cleared all my confusions. ❤️
I got stucked for an hour then got ur video and it really helps me .
Thank You Sir
Your words are clearly understood by non-English speakers.
And your video is really helpful. Thanks! 감사합니다.
Max, You are simply great ! And there is absolutely no definition for your greatness ! First of all, let me tell you, I am now a professional Frontend React Developer by only learning React from ground zero from your Udemy Course. Literally I had to go nowhere after learning from your course.
Your teaching method is just amazing where your start from very basic and then gradually move to very advance levels covering almost the aspects required to start with any concept.
Coming back to this video, since the update of React Router to v6, I was finding difficulties to migrate from v5 but again you made it really simple by covering all the important points in this video and that too by using the same sample apps which you used in your Udemy course that makes really easy for me to update my notes ( as almost all my React notes are based on your concepts ).
Thanks once again !
Thanks Max. Whenever a new video comes up I have a grin on my face
I got that error @2:40 and thought to myself, "is this a typescript issue of some kind?", then went down a crazy rabbit hole for like 20 minutes, reviewing their source-code, trying to figure out why neither I nor VSCode could find the import in node_modules. Lol I didn't, for a second, stop to consider the possibility that react-router-dom just got a major update with breaking changes. Wild that this only happened like 2 weeks ago, insane timing 😂. Anyway, thanks Academind for putting out this video! 🙌🏽 Now, lets keep watching and learning what's new ☮️
Thank you, Max. Excellent information, as usual. Keep up the great work. 👨💻
thanks for this video max!!!!! youre the best teacher by far, so easy to understand. Just waiting for protected routes documentation, cannot find it
I like ur all videos. you talk to the point and save a lot of times . Thanku so much sir . keep it up
Thankyou so much Brother, I was getting Error from last 2 Hours and Now your video is Life Saver Thanks Man🖤
Yet another perfect video by Academind ❤️❤️❤️
Guys, you are my number one when it comes to courses! I have almost all your courses on Udemy ❤️
This was such a clean explanation, thanks!
I have stuck for 2 days that what's happening to react router and fortunately came across your video. Really informative.
Really nice summary. I'm starting with React dev now, and this video was not just an upgrading guide, but a tutorial on React Router v6 in itself. One question though, is it possible to listen to browser navigation (for example, by pressing the browser back button), or this is the part that we are missing on v6?
As a guy still in school who doesn't have the best grasp of react.
YOU SAVED ME OMG I WAS STUCK FOR ALMOST AN HOUR BEFORE WATCHING THIS/
Seriously thanks
Thanks Max for sharing such information
Exactly what I was looking for.......cheers
Thanks, it was really helpfull to get updated with react!
Amazing! Much appreciated, amazing explanation, will start using v6 now
Thank you for making this video,really helpful.
These changes broke my app for like 20 minutes while I tried to figure out what was going on, but all-in-all, I like the new way. The semantics make more sense, the route matching algorithm is more intuitive, and the "exact" keyword is there by default, which is typically the behavior we're looking for. Progress! 🏆
It deadass it to me too
so much with one upgrade, thanks max!!!!
You've earned a new subscriber, thank you!
Very helpful content! Thanks!
WoooW a clear explanation everything was clear.
Thank you so much sir. Your video is just right on time. Hope you make another one for protected routes too. Thanks again sir😀
Thank you so much for making this react router v6 video for us, MAX♥♥
This is very helpful video please make more of this kind when something changes...
Thank you very much for that video and good explanation AND the source code of your examples, much appreciated :)
It's worth to mention that links starting with a slash are still considered absolute paths, regardless of any nesting.
So if Welcome page renders a Link to='/welcome', it will point to a '/welcome' path. But Route path='/welcome' in the same case will work as it's shown here - it will actually point to '/welcome/welcome'.
This difference is a bit confusing for starter, but logical when you think about it. Links are working as they did before, while Routes always maintain a hierarchy.
This is so useful, old tutorials using a different syntax meant I had absolutely no clue why my jsx weren't rendering until I stumbled across your video. Thank you!
Please how did you do it my is still showing a white blank page after changing the the route into an element format
@@naruto.boruto_edt Hey, can you copy past your code in here? This is what I made:
//removed
@@ao4-stzf thanks for your concern but I figured it out. It was just an error of wrapping Routes on route.
@@naruto.boruto_edt No worries! Glad it worked out ^^
Awesome, thanks Max your vids taught me Vue better than anyone else did and now these React ones are doing the same.
excellent clear explanation, auto subscribe!!!
i have spent my two day for this error !!
Thanx Sir for provide this video
Max, you are the best. Thank you for these instructions
Thank you so much! Happy to hear that this was helpful!
such a great video, thanks so much for making the video
Before 2 year, you both are super champ in youtube, now a days I see only less videos in youtube
Super, max loving it.
This is awesome. You are awesome. Thank you so much. This is exactly what I wanted.
Wow, great tutorial. Thank you so much.
Thank you so much Max!, you saved my day too.
the new change of nested routes will help a lot , because I used to change the relative path's name and have to go through every nested routes to replace it .
Excellent! Thank you.
This is a great video, the docs shuold be a walk in the park now
Amazing, thank you very much!
Max, one of the best!!!! Thanks so much!
mindBlowing Explanation...
Extremely helpful
thanks, that help is very help full
I like the new concept of relative path in a nested route. Anyway, You are a good explainer, thanks for your video, seeing this, I think I will immediately upgrade to V6
Very useful content 🙂, thanks, thare are a lots of changes.
Thanks for the best explanation about activeClass for NavLink :-)
amaizing explanation, thanks
Outlets are a game-changer for the semantic structure of routes!
BLESS YOU GUYS SOOOOOO MUCH
Thanks man, I had upgraded to v6 and you saved my from seeing that lengthy documentation !!
Omg, you literally saved my life! I have been strugling to understand what all those errors came from even though I knew about Router v6 came out but now I know exactly how to fix them! So precious!
Your entire life was in precarious danger because of react router's v6? The dev team behind the new version are very evil...
@@Seeking_Solace Haha, it's figuratively speaking, of course not, my life is not in danger. And I am not the first person ever who expressed their gratitude in such a dramatic way to show how big is the impact from the video. So why bother implement sarcasm in your comment towards mine?
Was just fooling around.
@@Seeking_SolaceOk, I get that
Thank you, was stuck a bit :)
YOU ARE THE BEST!!!!
YOU DESERVE EVERYTHING YOU PRAY FOR
Thanks, finally React navigation becomes more elegant like Angular
Thanks, it makes my life a little bit easier.
Btw `matchPath` also broken during migration from v5 to v6, replace it with `useMatch`.
I wub you
Thanks so much, Regards!
Thanks, Max .
i love this update, please stay make more
Please please big AWS course for developers. Existing one is small. ❤️
Very clear.
THANK GOD THIS TUTORIAL EXIST
You have good pronunciation, I can easily understand you despite my English is not very , very good.
Thank you!
Thanks Max! Great video as always. What's the best way to declare child routes that are not nested. For example if you have a Products page (/products) and a sub category of products, something like (/products/chairs). You just put one bellow the other or there's a better way to declare them?
Thank You!
תבורך מפי עליון!
Thanks it's perfectly clear :)
Great to hear that, thanks so much!
Waaooooo this is sooo good ❤️
Well explained.
I liked the video, it would be interesting if you made a video of how to perform the tests with React Testing Library in this new version, because I had difficulties to render the elements.
Following
always something special
My favourite teacher ❤️
Good one!
Thanks max you're awesome