React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial

In this React Router v6 upgrade & refactor tutorial, you will learn about React Router v6 including how to upgrade from v5 while refactoring a React JS Blog project utilizing the new features of RRv6.

React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial

(00:00) Intro
(00:09) Welcome
(00:15) Look at the docs
(01:07) The Starter Project
(02:15) Installing React Router Version 6
(06:39) useNavigate replaces useHistory
(07:26) Adding a Layout Component
(11:35) Adding Outlet index content
(13:40) Nested Routes
(16:13) Additional Routes
(17:04) Review of the Routing Structure
(18:29) Link and useParams
(20:20) Testing the Refactored Code

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 References:

✅ Follow Me:

Was this tutorial about the React Router v6 helpful? If so, please share. Let me know your thoughts in the comments.

#react #router #v6

[johnmcaulay]

I thought I was losing my mind when I installed React Router on a new project the other day and couldn't get anything to work, then I realised there had been a major update. Thanks for the run through!

[jdundee]

For myself rafce works without the underscore. I am doing a paid course and when they got to the react section I finished it with little understanding of what I was doing and immediately paused the course to come back to your channel, so many may know the material but they don’t have the teaching skills you have 🤟

[anangyoga]

I've been stuck for a while on video 16. but since I watched this refactor, I think I can continue to learn video 17, even though it might need a little bit of adjustment. thanks mr Gray!

[vladislavamarkova]

Thank you so much, Dave! Best React tutorials and explanation of React Router 6. It is really heplful and gives me the passion to learn more!

[ahmad-murery]

Now that I have a very strong memory I think it will take some time for me to stop confusing the syntax of old and new router 😎

Thanks for the update Dave,

[CTILET]

I began to learn react router. And the video is loaded in your chanel!

[nirajborkar]

useReducer hook was one of my nemesis while leaning React JS ;P but Thanks to you Dave Gray. Now it looks like a piece of cake. Awesome tutorials Dave. Keep up the good work :)

[dsacppracticequestion]

Thanks Dave for this awesome updated video on RRv6.

[christopherpink]

Thank you, iwas doing your react course notcied about the router tried to understand the version 6, but had to use the version 5 to complete it. thanks for updating to version 6

[mikeyo]

Excellent. Thanks for updating for react-router-dom V6. Very helpful

[Furki_]

I was about to freak out while watching React Routes in the React tutorial, thank you for updating the routes tutorial. I think this looks better and similar to the Angular Router :3

[portiseremacunix]

hmmm, this channel is my go-to place for everything on HTML, CSS, JS and React etc...like a reference book. Thanks for your work!

[eddieotudor]

You're an amazing person! Thanks a lot for teaching me!

[jrmaiafs]

Thank you for this update. It will be very important in my project.

[cristhiandavidgiraldosanch]

Thank you so much. I was waiting for this video and you really helped me.

[fkbey]

thanks. wish i would be a student where you are teaching in university. I hope, your students aware of having a best programming teacher in the planet.

[josuegarcia]

Excellent video just like the rest of yours, I appreciate the knowledge you add to our mind, the only thing I did not see here is that the edit functionality was not included, is it maybe updated later in the course? I am at video #20 right now and I added it to the route but it does not display anything, I maybe added it wrong.

[mohiminurrahman]

Thank you sir .
Waiting for this ... now its on air ..
Tq sir ❤

[zarefgamz]

you helped me a lot and saved me a lot of time

[arjaybet]

nice video, 👍 but would be nice if you could have a version of migration of this using route config so that to compare it