React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial
HTML-код
- Опубликовано: 13 июн 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
🔗 Starter Source Code: github.com/gitdagray/learn_re...
🔗 Refactored Source Code: github.com/gitdagray/react_ro...
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
(04:05) Updating the Index.js
(06:09) Updating the App.js imports
(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:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 References:
React Router: reactrouter.com/
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the React Router v6 helpful? If so, please share. Let me know your thoughts in the comments.
#react #router #v6
Within a couple months of introducing my React JS for Beginners course, React Router released a new major version: React Router 6. The changes are great! But they were breaking changes for the blog project in my React JS for Beginners course. That gave a great opportunity for a video tutorial where the React JS blog is refactored with RRv6...this video! Consider this video a new chapter to the course that shows how to implement RRv6 instead of v5. Just starting with React? My React JS for Beginners course provides 9 hours of tutorials to help you level up: ruclips.net/video/RVFAyFWO4go/видео.html
Hey Dave,
Just try this out.. Type --> rafce inside any .js file and press Tab this will auto complete it, and also check emmet is present and configured correctly.
Thank You. You are awesome 🤩
@@waseem4783 yeah I have heard, but it doesn't work for me. I do use Emmett daily so no issue there. I need to take the time to see what is preventing this in my settings. Thanks for the note.
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!
I can see how that would happen. There are some big changes!
Thanks Dave for this awesome updated video on RRv6.
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!
You're welcome! 🙏🙏
AWESOME tutorial, thank you Dave!
Thank you so much for this refactor!
Thanks for the refactor video man
Thank you so much. I was waiting for this video and you really helped me.
You're welcome! I'm glad to hear it helped 💯🚀
Excellent. Thanks for updating for react-router-dom V6. Very helpful
You're welcome! 💯
Thank you for this update. It will be very important in my project.
You are welcome!
Thanks man you the best ✌️🔥
Simple & precise explanation ty.
Glad it was helpful!
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 🤟
You're an amazing person! Thanks a lot for teaching me!
...was able to wrap my head around the Routing but making use of links got me lol! I'm cool now, thanks!
Glad I could help, Eddie! 💯
I began to learn react router. And the video is loaded in your chanel!
Glad to hear it! 💯
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 :)
Glad to hear that! 🚀
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!
You can do it! 🚀
@@DaveGrayTeachesCode hi dave, I am getting error of useRef even though I have done the Router Routes and Route correctly please help
Thank you sir .
Waiting for this ... now its on air ..
Tq sir ❤
You're welcome! 💯🚀
Great update video.
Thank you, Ramon! 🙏
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!
Thank you for the kind words, Kirby! 🙏💯
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
Glad to help!
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,
New versions always make us keep learning! Thanks for the comment my friend 🙏💯
@@DaveGrayTeachesCode so true, this is part of us,
maybe this is why we choose to be developers,
my only problem here is I have 4 hours of electricity to manage all sort of things in my life,
so thanks for making it a bit easier to catch up my friend,
you helped me a lot and saved me a lot of time
Glad to hear that!
omg your chanal have everything i need
Glad to hear it! 💯
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
You're very welcome!
Awesome Tutorial +++++++++++++++++++++ Thank You
nice video, 👍 but would be nice if you could have a version of migration of this using route config so that to compare it
Hey Dave, I've found out that this works as well. Should I use this or not:
Instead of useNavigate I just enclosed the submit button inside a Link tag that took me to the home page after adding the new post to posts.
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.
Thank you, Josue! It has been a few months, but I thought everything was updated when I made this. You can download my source code to compare to yours.
Awesome, I just used the lines before as you had in the "post" section and used "edit/:id" instead of post and it worked just fine, if someone
needs the code let me know I can share it
@@josuegarcia4280 Hi Josue Can I see the code for the edit routes?
@@DaveGrayTeachesCode You didn't include edit part. Could you include the peace of code for edit?
Mr. Gray, would you use react router or nextjs dynamic routing for big projects? I have never been a fan of react router due to how messy it can get.
I really like the changes in React Router v6. I also think Next JS is excellent and look forward to covering it later this year. I think both are good choices, and you should go with what you are most comfortable with. 💯🚀
I really enjoy your content. A few months ago I learned Angular 12 as it seemed that is where things were going, and this month, it appears I need react.
The position I accepted uses redux and immer. I think I ended up here following your 9hr full course tutorial, when the router section threw a bunch of errors (I am sure its a version thing) as I was going through it on the way to getting to the redux section at the end.
The long / short question is do you have anything that shows how you would start to implement immer with redux?
And
Do you find react to be the simplest of the frameworks (Angular/Vue/React/Next). And what do you think of Nuxt?
Thank you! Redux now uses Immer.js "under the hood". I recently completed a Redux full course tutorial here: ruclips.net/video/NqzdVN2tyvQ/видео.html Immer also you to write code that would otherwise mutate state, but it handles it properly for you. I do like React and the modern application of Redux. I don't have enough experience with Nuxt to compare it. Next.js is something I plan to cover yet this year. 🚀
Thanks so much. I was stuck in the amgularjs world until recently and your videos have been really valuable getting up to speed for a position I accepted.
I did a few side projects in angular 12 which was a little verbose but I was able to pick it up faster than react. Ive been struggling with some of the concepts for the immutable data store techniques. I was feeling really frustrated until I found your videos.
I really appreciate what it takes to keep these updated. As well as the attention to detail and patience required to express complex ideas in a simple and consumable way. So thank you kindly.
@@IconicProps you're welcome! 🙏
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.
Thank you for the kind words! 🙏💯
I repeated exactly, everything run successfully but unfortunately received this
Matched leaf route at location "/" does not have an element or Component. This means it will render an with a null value by default resulting in an "empty" page.
What might be the correction?
Hi Dave, please check Path intellisense or visual studio intellicode plugin out. I’m not sure which one because i installed those two at the same time. After I installed those plugins, I don’t have to use” ctr +alt+ R” anymore. I just type “rafce” directly from then
Yes, I fixed mine awhile back. It was a setting in VS Code that had been altered.
THX! Make more advanced content please
You're welcome! I just completed a Redux Toolkit series that is advanced 💯
Thank you sir. Tell me please, what font (in editor) you use in this video?
You're welcome! I am using the Github Theme extension for VS Code. It has several options. I choose the "Dark Default".
@@DaveGrayTeachesCode Thanks, but can you copy what you have in Settings -> Editor:Font Family
js framework : a self-destructive ecosystem.
Would it be a better pratice to use instead of since this route is nested inside a ? I tried making that change and it routes just fine. Thank you very much.
18:08
@@zman7357woah thanks!
Nice Video by the way it's not _rface remove the underscore and it will work for you
sir plz do state management in react & Context API useContext in this version ...axios and custom hook worked well ,,but state management little bit confusion
I am using the Context API in my recent React form tutorials: ruclips.net/video/FGM6FQmdX8I/видео.html
Hello Dave gray, have been stuck in this tutorial video even after watching the new version
example of problem
import { useParams } from "react-router-dom";
const PostPage = ({ posts, handleDelete }) => {
const { id } = useParams();
const post = posts.find(post => (post.id).toString() === id)
return(
{post &&
{post.title}
{post.datetime}
{post.body}
handleDelete(post.id)}>Delete
}
{!post &&
No post available
}
after coding the home post it work, function and display but i code this in postpage it's not displaying or function and I don't know the reason why it happen such way, and its delay me to process on the class. sir can you help solve the problem, thanks for the tutorial class.
You don't need to wrap a Route component inside other Route components. You can simply do this:
Mine works with no underscore, just rafce, and intellisense pops the completion with tab.
I finally looked into this and had to make a couple of changes in my VS Code settings. Now mine works this way, too.
i know this might be an inconvenience to you, but trying to keep up with this and the original chapter 16 17 18, is incredibly confusing so could you redo those videos with the V6 React Router
I will create a new React course at some point, but technology keeps moving forward. I cannot edit and update videos once they are published to RUclips. My redo will be to publish a new course eventually. Thanks!
@@DaveGrayTeachesCode thank you, i think i jumped the gun when commenting, i just gave it a go and i understood it, so i just want to say thank you again for the update
@@DaveGrayTeachesCode Perhaps just a redo of Chapters 16 & 17. Lot's of work I know.
why we need use strict mode ?
Strict mode can be very helpful when you are developing your app.
Pls can you work on the Edit post as well
I changed it like this:
React router updated to 6.12. is there any code change?
Possibly. I need to do another update on where RR is now. You can always install the version I am using here - listed in my package.json file.
8:20 For me, it's just `rafce` without the underscore.
when typing it into the document you don't need to add the underscore (rafce not _ rafce)
Correct. I had something in VS Code settings I needed to correct. All good now.
what themes is this?
My theme choices: ruclips.net/user/shortsdp4u1NNFhtE
Can you make a video on redux thunk and redux saga separate video
Yes, I would like to do these!
@@DaveGrayTeachesCode please next video same topic like redux thunk and saga
@@DeepakGupta-hj2dv It won't be the next video because I already have a schedule but I am adding these to the list 💯
Okk
Hey Dave. Just type rafce Not the underscore _rafce
There is a difference. Leaving out the underscore also includes the React import at the top of the file which is no longer needed. Otherwise, they are the same. 💯
@@DaveGrayTeachesCode Ah nice. That's a good tip. Thank you.
redundant in index.js You could have just put instead
No. You don't understand how this allows nested routes to match. The /* is important here.
@@DaveGrayTeachesCode do you have a link to documentation? Works perfectly fine without this piece of code.
It will work for specified routes but it won't match others. You should match others with the "splat" aka wildcard which is an asterisk. Docs: reactrouter.com/en/main/route/route#splats
I cover it here: ruclips.net/video/XBRLVRjZ3CQ/видео.htmlsi=mQcCunWffxo4Fmg5&t=316 ..now that said, I have provided a lot of good information in this video and on my channel. Yet, on more than one video now, you have commented in a negative way like you are looking for anywhere I may not be perfect no matter how helpful the rest of the video is. Let me save you some time.. I'm not perfect. My advice to you.. stay positive and be polite. It will help you in the long run.
React Dom no longer renders must use createRoot , needs updated once again
Only rafce
React router updated it to v6.4
Yes they did some new features. I will cover it. That said, not breaking changes or the version would move to 7.
@@DaveGrayTeachesCode Thank You
teaching how to update an applicaiton from previous code is a good exercise, but you can't create the previous version project tutorial to learn the concepts to understand what you're updating here so its a catch 22
There is a link to the starter code in the description. This is an update to the React Router tutorial in my full React course, and it has helped many. I hope you are doing well my friend. Your comments are somewhat negative overall. Please have a good day.
don't write _rafce write that rafce and Enter
I discovered my IntelliSense settings were off in VS code at the time. It all works as it should now.
Awesome Tutorial +++++++++++++++++++++ Thank You
Awesome Tutorial +++++++++++++++++++++ Thank You