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!
![ลักพาตัว เอาลูกเอิร์นกลับมา...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/f4NVKlZ5qkk/mqdefault.jpg)
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.
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! :)
Thanks a million, Maximilian, for an excellent update, always coming up with a clean and clear explanation as you always do in your courses.
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.
@@Omar_Al_Seddik lol
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!
Fan of your work Max, I love how easily you make us understand these complex things.
This video is a piece of gold, it's rare to find videos that cover everything 💚
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!
I got stucked for an hour then got ur video and it really helps me .
Thank You Sir
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.
Helpful. I did fall in love with your React course
Thanks Max for such a clear and concise upgrade guide it really helped me a lot. Awesome as always.
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.
Thanks Max. Whenever a new video comes up I have a grin on my face
Such a brilliant and to the point explanation.
I learned react native from you and now react router explanation is superb.
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.
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
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 !
I was thinking to upgrade my current project to react router 6 but was super confused. You cleared all my confusions. ❤️
I have stuck for 2 days that what's happening to react router and fortunately came across your video. Really informative.
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 ❤️
I like ur all videos. you talk to the point and save a lot of times . Thanku so much sir . keep it up
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).
Thankyou so much Brother, I was getting Error from last 2 Hours and Now your video is Life Saver Thanks Man🖤
Thank you, Max. Excellent information, as usual. Keep up the great work. 👨💻
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
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.
Your words are clearly understood by non-English speakers.
And your video is really helpful. Thanks! 감사합니다.
Thanks Max for sharing such information
Exactly what I was looking for.......cheers
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?
thanks for this video max!!!!! youre the best teacher by far, so easy to understand. Just waiting for protected routes documentation, cannot find it
This is a great video, the docs shuold be a walk in the park now
WoooW a clear explanation everything was clear.
You've earned a new subscriber, thank you!
This was such a clean explanation, thanks!
Thank you for making this video,really helpful.
Very helpful content! Thanks!
Thanks, it was really helpfull to get updated with react!
i have spent my two day for this error !!
Thanx Sir for provide this video
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 ^^
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 ☮️
so much with one upgrade, thanks max!!!!
Thank you so much for making this react router v6 video for us, MAX♥♥
Super, max loving it.
Before 2 year, you both are super champ in youtube, now a days I see only less videos in youtube
such a great video, thanks so much for making the video
Amazing! Much appreciated, amazing explanation, will start using v6 now
Thank you very much for that video and good explanation AND the source code of your examples, much appreciated :)
This is very helpful video please make more of this kind when something changes...
excellent clear explanation, auto subscribe!!!
Thank you so much sir. Your video is just right on time. Hope you make another one for protected routes too. Thanks again sir😀
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...
@@Omar_Al_Seddik 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.
@@Omar_Al_SeddikOk, I get that
Awesome, thanks Max your vids taught me Vue better than anyone else did and now these React ones are doing the same.
תבורך מפי עליון!
Max, you are the best. Thank you for these instructions
Thank you so much! Happy to hear that this was helpful!
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.
Excellent! Thank you.
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 .
thanks, that help is very help full
THANK GOD THIS TUTORIAL EXIST
Wow, great tutorial. Thank you so much.
Extremely helpful
Thank you, was stuck a bit :)
mindBlowing Explanation...
This is awesome. You are awesome. Thank you so much. This is exactly what I wanted.
Thank you so much Max!, you saved my day too.
Thanks for the best explanation about activeClass for NavLink :-)
Very useful content 🙂, thanks, thare are a lots of changes.
Max, one of the best!!!! Thanks so much!
Amazing, thank you very much!
Thanks man, I had upgraded to v6 and you saved my from seeing that lengthy documentation !!
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?
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
I wub you
Thanks so much, Regards!
amaizing explanation, thanks
Max, make a video on Next.js 12.
BLESS YOU GUYS SOOOOOO MUCH
Thanks, Max .
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
YOU ARE THE BEST!!!!
YOU DESERVE EVERYTHING YOU PRAY FOR
i love this update, please stay make more
Very clear.
Hello, thank for the video. I have a quastion about history:
On v5 version i was creating history with createBrowserHistory and pass her into . And then i could programically redirect from outside of the component. I do this for move most login from component to the store-manager. How its possible to do the same on v6? Thanks for answer.
hi i have a question, was there a complete docker course on this channel right ?? and your videos are amazing
You have good pronunciation, I can easily understand you despite my English is not very , very good.
Thanks, finally React navigation becomes more elegant like Angular
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
Hey! Fantastic tutorial. Two questions tho:
1- If I'm inside of a component, now routing is relative to the parent. What if I want to go out, and have a link to the main page? Am I obligated to use navigate? Or navigate is also relative to the parent route?
2- The outlet: we saw an example of an outlet with just one child. But what if have two or more children? How can I specify the place to show each of those if the position in the page for them is different?
Thank you so much for this!
Thanks it's perfectly clear :)
Great to hear that, thanks so much!
Waaooooo this is sooo good ❤️
Thank You!
Thank you!
Outlets are a game-changer for the semantic structure of routes!
Thanks max you're awesome
My favourite teacher ❤️