React Router 6 - What Changed & Upgrading Guide

Рет қаралды 173,226

2 жыл бұрын

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!

Пікірлер: 267

@amhadesta363 2 жыл бұрын

As usual, you do the heavy lifting for us and save us a ton of time. Thanks, Max!

@academind 2 жыл бұрын

Really great to hear that, thank you!

@user-qy2wf2lt6v 2 жыл бұрын

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.

@FinAgno 2 жыл бұрын

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! ❤️

@academind 2 жыл бұрын

That's just amazing to hear and honestly means a lot to me! Thank you so much!

@Gruby7C1h 2 жыл бұрын

Max is Sal Khan of React.

@b4lax 2 жыл бұрын

1.000.000.000 % Agree.

@Seeking_Solace 2 жыл бұрын

@@b4lax That's equivelant to 1%, meaning you 99% disagree.

@famuleolamide7026 2 жыл бұрын

@@Seeking_Solace lol

@jordanmowry9164 2 жыл бұрын

Thanks Max! I was reading React Router's documentation yesterday and was super confused. Very clear now.

@academind 2 жыл бұрын

Really great to hear that! Thank you so much for the nice feedback! :)

@maurillekobri9484 2 жыл бұрын

Thanks a million, Maximilian, for an excellent update, always coming up with a clean and clear explanation as you always do in your courses.

@mpcrockett Жыл бұрын

I've come back to this video several times, it's a lifesaver! Thanks!

@harshmalviya4831 2 жыл бұрын

Fan of your work Max, I love how easily you make us understand these complex things.

@jacob_dmn 2 жыл бұрын

This video is a piece of gold, it's rare to find videos that cover everything 💚

@maro7057 2 жыл бұрын

Your words are clearly understood by non-English speakers. And your video is really helpful. Thanks! 감사합니다.

@mustaneerhaider515 2 жыл бұрын

Thanks Max for such a clear and concise upgrade guide it really helped me a lot. Awesome as always.

@jasonwhisnant5457 2 жыл бұрын

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!

@kllokoq 2 жыл бұрын

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.

@mishucodes6982 2 жыл бұрын

I got stucked for an hour then got ur video and it really helps me . Thank You Sir

2 жыл бұрын

Helpful. I did fall in love with your React course

@mthaha2735 2 жыл бұрын

Thanks Max. Whenever a new video comes up I have a grin on my face

@mohsinraza9228 2 жыл бұрын

Such a brilliant and to the point explanation. I learned react native from you and now react router explanation is superb.

@shikhajamwal4709 2 жыл бұрын

I like ur all videos. you talk to the point and save a lot of times . Thanku so much sir . keep it up

@officerjeremydewitte2138 2 жыл бұрын

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

@tech-updates 2 жыл бұрын

Before 2 year, you both are super champ in youtube, now a days I see only less videos in youtube

@RahulKumar-qu1if 2 жыл бұрын

I have stuck for 2 days that what's happening to react router and fortunately came across your video. Really informative.

@mrjebbar 2 жыл бұрын

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.

@huangdiamond1778 2 жыл бұрын

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.

@audreydelgado2198 2 жыл бұрын

Thank you, Max. Excellent information, as usual. Keep up the great work. 👨‍💻

@AgustinAstronomy 2 жыл бұрын

thanks for this video max!!!!! youre the best teacher by far, so easy to understand. Just waiting for protected routes documentation, cannot find it

@SergioDavidLaserna 2 жыл бұрын

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.

@samaykasamay 8 ай бұрын

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 !

@shadabanwar2101 2 жыл бұрын

I was thinking to upgrade my current project to react router 6 but was super confused. You cleared all my confusions. ❤️

@KennyCha87 2 жыл бұрын

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.

@hasanmirarabshahi1956 2 жыл бұрын

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

@ozzyfromspace 2 жыл бұрын

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! 🏆

@friction5001 2 жыл бұрын

It deadass it to me too

@sagarsagar3456 2 жыл бұрын

Thanks Max for sharing such information

@petarkolev6928 2 жыл бұрын

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 ❤️

@mrinalraj7166 2 жыл бұрын

Exactly what I was looking for.......cheers

@eminm6383 2 жыл бұрын

This was such a clean explanation, thanks!

@mohd.yasnnn 2 жыл бұрын

Thank you for making this video,really helpful.

@shahadtuglak1906 2 жыл бұрын

Thankyou so much Brother, I was getting Error from last 2 Hours and Now your video is Life Saver Thanks Man🖤

@itgiants5218 2 жыл бұрын

WoooW a clear explanation everything was clear.

@andygr1n1 2 жыл бұрын

Thanks, it was really helpfull to get updated with react!

@GoBeyondCode 2 жыл бұрын

so much with one upgrade, thanks max!!!!

@felicitya.9077 2 жыл бұрын

You've earned a new subscriber, thank you!

@gabrielgherman87 2 жыл бұрын

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).

@elenah949 2 жыл бұрын

Very helpful content! Thanks!

@waleedsharif618 2 жыл бұрын

This is very helpful video please make more of this kind when something changes...

@RaviSharma-wd3rd 2 жыл бұрын

i have spent my two day for this error !! Thanx Sir for provide this video

@ahishka7243 2 жыл бұрын

Amazing! Much appreciated, amazing explanation, will start using v6 now

@seanfang398 2 жыл бұрын

Thank you so much for making this react router v6 video for us, MAX♥♥

@lucasmdo 2 жыл бұрын

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?

@marcus_leon 2 жыл бұрын

Thank you so much sir. Your video is just right on time. Hope you make another one for protected routes too. Thanks again sir😀

@oliviazhai1831 2 жыл бұрын

such a great video, thanks so much for making the video

@stillready6405 2 жыл бұрын

Thank you very much for that video and good explanation AND the source code of your examples, much appreciated :)

@ozzyfromspace 2 жыл бұрын

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 ☮️

@elpotatoslayer 2 жыл бұрын

This is a great video, the docs shuold be a walk in the park now

@flowerofash4439 2 жыл бұрын

excellent clear explanation, auto subscribe!!!

@micoberss5579 2 жыл бұрын

Max, you are the best. Thank you for these instructions

@academind 2 жыл бұрын

Thank you so much! Happy to hear that this was helpful!

@vu8860 2 жыл бұрын

Wow, great tutorial. Thank you so much.

@murugarajuperumalla5508 2 жыл бұрын

Super, max loving it.

@Lotpite 2 жыл бұрын

Thanks for the best explanation about activeClass for NavLink :-)

@ante106 2 жыл бұрын

Thank you so much Max!, you saved my day too.

@maxchoquemartinez6126 2 жыл бұрын

thanks, that help is very help full

@vaheghevondyan9437 2 жыл бұрын

Excellent! Thank you.

@m0hammedimran 2 жыл бұрын

This is awesome. You are awesome. Thank you so much. This is exactly what I wanted.

@PartheevVideoClub 2 жыл бұрын

Max, make a video on Next.js 12.

@SmokinMesa 2 жыл бұрын

Awesome, thanks Max your vids taught me Vue better than anyone else did and now these React ones are doing the same.

@shrimalishrimali7170 Жыл бұрын

mindBlowing Explanation...

@sorserer3795 2 жыл бұрын

Thank you, was stuck a bit :)

@saskirakosyan5268 2 жыл бұрын

Very useful content 🙂, thanks, thare are a lots of changes.

@tanishqvyas8387 2 жыл бұрын

Extremely helpful

@flowerofash4439 2 жыл бұрын

THANK GOD THIS TUTORIAL EXIST

@DARKCOP2011 2 жыл бұрын

Max, one of the best!!!! Thanks so much!

@edoardo7848 2 жыл бұрын

Amazing, thank you very much!

@ao4-stzf 2 жыл бұрын

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!

@naruto.boruto_edt 2 жыл бұрын

Please how did you do it my is still showing a white blank page after changing the the route into an element format

@ao4-stzf 2 жыл бұрын

@@naruto.boruto_edt Hey, can you copy past your code in here? This is what I made: //removed

@naruto.boruto_edt 2 жыл бұрын

@@ao4-stzf thanks for your concern but I figured it out. It was just an error of wrapping Routes on route.

@ao4-stzf 2 жыл бұрын

@@naruto.boruto_edt No worries! Glad it worked out ^^

@saifrehman8631 2 жыл бұрын

YOU ARE THE BEST!!!! YOU DESERVE EVERYTHING YOU PRAY FOR

@juliantoro8416 2 жыл бұрын

amaizing explanation, thanks

@azeriwindowoz 2 жыл бұрын

Thanks, finally React navigation becomes more elegant like Angular

@elvinqurbanov6669 2 жыл бұрын

Thanks so much, Regards!

@Pilosofia 2 жыл бұрын

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 .

@tomasburian6550 2 жыл бұрын

I wub you

@temycodes 2 жыл бұрын

BLESS YOU GUYS SOOOOOO MUCH

@user-qs8dk8bv2t Жыл бұрын

תבורך מפי עליון!

@amritsingh-nu3yv 2 жыл бұрын

Thanks man, I had upgraded to v6 and you saved my from seeing that lengthy documentation !!

@AlejandroMottaYT 2 жыл бұрын

i love this update, please stay make more

@a_abazine 2 жыл бұрын

Very clear.

@settrannaing4008 Жыл бұрын

Thanks, Max .

@marcinkalmar9964 2 жыл бұрын

You have good pronunciation, I can easily understand you despite my English is not very , very good.

@jerondiovis6128 2 жыл бұрын

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.

@ozzyfromspace 2 жыл бұрын

Outlets are a game-changer for the semantic structure of routes!

@airixxxx 2 жыл бұрын

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?

@pavleta777 2 жыл бұрын

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!

@Seeking_Solace 2 жыл бұрын

Your entire life was in precarious danger because of react router's v6? The dev team behind the new version are very evil...

@pavleta777 2 жыл бұрын

@@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?

@Seeking_Solace 2 жыл бұрын

Was just fooling around.

@pavleta777 2 жыл бұрын

@@Seeking_SolaceOk, I get that

@popprazanaparanyaugustin7724 2 жыл бұрын

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