React Router 6 - What Changed & Upgrading Guide

[@amhadesta363]

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

[@academind]

Really great to hear that, thank you!

[@user-qy2wf2lt6v]

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.

[@maro7057]

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

[@FinAgno]

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]

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

[@Gruby7C1h]

Max is Sal Khan of React.

[@jinpacil]

1.000.000.000 % Agree.

[@Omar_Al_Seddik]

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

[@famuleolamide7026]

@@Omar_Al_Seddik lol

[@huangdiamond1778]

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.

[@jordanmowry9164]

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

[@academind]

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

[@jasonwhisnant5457]

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!

[@RahulKumar-qu1if]

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

[@samaykasamay]

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 !

[@officerjeremydewitte2138]

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

[@ozzyfromspace]

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]

It deadass it to me too

[@mpcrockett]

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

[@KennyCha87]

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.

[@shahadtuglak1906]

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

[@mishucodes6982]

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

[@hasanmirarabshahi1956]

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]

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

[@tech-updates]

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

[@mohsinraza9228]

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

[@jacob_dmn]

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

[@kllokoq]

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.

[@ao4-stzf]

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]

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]

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

[@naruto.boruto_edt]

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

[@ao4-stzf]

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

[@gabrielgherman87]

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

[@shadabanwar2101]

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

[@RaviSharma-wd3rd]

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

[@pavleta777]

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!

[@Omar_Al_Seddik]

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

[@pavleta777]

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

[@Omar_Al_Seddik]

Was just fooling around.

[@pavleta777]

@@Omar_Al_SeddikOk, I get that

[@SmokinMesa]

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

[@azeriwindowoz]

Thanks, finally React navigation becomes more elegant like Angular

[@mthaha2735]

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

[@maurillekobri9484]

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

[@shikhajamwal4709]

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

[@elpotatoslayer]

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

[@mustaneerhaider515]

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

[@SergioDavidLaserna]

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.

[@amritsingh-nu3yv]

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

[@aquepaique]

yeah, React Router 6 is more readable and intuitive Thanks Max!

[@jerondiovis6128]

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.

[@zhangyoulv]

Thanks, it makes my life a little bit easier. Btw `matchPath` also broken during migration from v5 to v6, replace it with `useMatch`.

[@marcinkalmar9964]

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

[@waleedsharif618]

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

[@petarkolev6928]

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

[@harshmalviya4831]

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

[@seanfang398]

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

Helpful. I did fall in love with your React course

[@ozzyfromspace]

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

[@Pilosofia]

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 .

[@arunchapagain8500]

Thats why you are highest rated on udemy too.. Thanks Max

[@marcus_leon]

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

[@ahishka7243]

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

[@AgustinAstronomy]

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

[@popprazanaparanyaugustin7724]

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

[@mrjebbar]

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.

[@PartheevVideoClub]

Max, make a video on Next.js 12.

[@tomasburian6550]

I wub you

[@paranoia-1994]

My English bad but great teacher, i undestand your lesson, thank from Russia

[@saifrehman8631]

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

[@audreydelgado2198]

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

[@Lotpite]

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

[@lucasmdo]

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?

[@andygr1n1]

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

[@FunctionGermany]

there seems to be a few rendering glitches in the video, like at 14:10, but also earlier around 7 minutes in. probably Premiere Pro being funky as usual.

[@academind]

Oh - that's indeed super annoying. Didn't catch that unfortunately. Indeed looks like some weird Adobe Premiere magic... Super sorry about that!

[@GoBeyondCode]

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

[@Thilina4321]

Please please big AWS course for developers. Existing one is small. ❤️

[@debora2633]

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.

[@mthaha2735]

Following

[@Ksenseisei]

min 24:30 Im a bit confused, is it necessary to use there? its just weird to me because we're changing everything to so why are you still using it there? is it because of the second approach to nesting routes?

[@abilashmanoj7924]

ended a day of agony for me..thank god i found this video

[@stillready6405]

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

[@itgiants5218]

WoooW a clear explanation everything was clear.

[@ghalitsar2730]

does we can do the same thing with the product & productDetail Route ? 22:52 i think the productDetail can be the child of product route? or i don`t know just wondering ..

[@dimitridoroshko]

Max, I bought your react course on Udemy. You explain everything straight to the point. Love it :)

[@academind]

Thank you so much! Really great to hear you're liking it! :)

[@mrinalraj7166]

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

[@sagarsagar3456]

Thanks Max for sharing such information

[@micoberss5579]

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

[@academind]

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

[@saskirakosyan5268]

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

[@gwapster13]

Isn’t changing the established form of the className prop (for NavLink) a debatable design decision? This is a great summary of the changes btw!

[@mohd.yasnnn]

Thank you for making this video,really helpful.

[@anhtungle1554]

bought your course twice.

[@felicitya.9077]

You've earned a new subscriber, thank you!

[@omrimaher2754]

I still watching to see if your video cover react router : Route Render Function and Route Props thanks for your efforts

[@m0hammedimran]

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

[@adr1m]

Great as always! Could you please make a short video on how to make a Modal using ReactRouter 6? Thank You!

[@eminm6383]

This was such a clean explanation, thanks!

[@sachinnaik7105]

Thank you so much Max for saving a lot of time reading through the upgrade guide. How can I preserve the existing query params while redirect/navigate considering that I am using browser router?

[@adarshchakraborty]

My favourite teacher ❤️

[@МаксимЛибер-ф2н]

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.

[@oliviazhai1831]

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

[@flowerofash4439]

THANK GOD THIS TUTORIAL EXIST

[@TheBestEpicProGamer]

Is there a video issue at 7:05 ?

[@FunctionGermany]

yes

[@academind]

Yeah indeed - super sorry about that. And extremely annoying. Looks like some rendering issue. Didn't catch that one unfortunately. Sorry about that!

[@TheBestEpicProGamer]

@@academind no problem :) nice video anyway

[@mahdikamran8061]

yore best teacher in the world

[@mohammadrezabehzadfar591]

thank you max,please make one tailwind css course

[@agustinfederico141]

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!

[@TheCodebookInc]

Best Diwali gift 😅

[@vu8860]

Wow, great tutorial. Thank you so much.

[@ante106]

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

[@elenah949]

Very helpful content! Thanks!

[@murugarajuperumalla5508]

Super, max loving it.

[@flowerofash4439]

excellent clear explanation, auto subscribe!!!

[@DARKCOP2011]

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

[@abeebayinla4858]

Thanks for the update. There is another change I saw which was "withRouter" was not found in version 6 or react-router-dom. Please do you know the alternative to "withRouter" in version 6?

[@NovaAquarius]

Super helpful. Can you also explore other things like privateRoute as that also changed with v6