React Router 6 - What Changed & Upgrading Guide

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.

Examples Code:

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[amhadesta]

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

[qywfltv]

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.

[jordanmowry]

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

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

[Thilina]

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

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

Hello, thank for the video. I have a quastion about history:
On v5 version i was creating history with createBrowserHistory and pass her into <Router history={history}></Router>. 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.

[huangdiamond]

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.

[jasonwhisnant]

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!

[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 <Prompt /> part that we are missing on v6?

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

[jerondiovis]

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.

[hasanmirarabshahi]

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

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

[gwapster]

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!

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

[shahadtuglak]

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

[dehman]

Todo: Watch this video after completing the React Router section in Max's Udemy course "React - The Complete Guide".

[maro]

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

[KennyCha]

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.

[mr_ehmed]

make a series on adonis JS Please please <3