React Router v6 Major Changes

Рет қаралды 129,467

2 жыл бұрын

Quick video on the major changes to React Router.
React Crash Course Repo:
github.com/bradtraversy/react...
React Front To Back 2022 Course:
www.udemy.com/course/react-fr...
React Router Docs:
reactrouter.com/
👇 Website & Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy

Пікірлер: 207

@CodeWithSahand 2 жыл бұрын

The best way to stay up-to-date is just to follow Brad 👌

@prashantbhat84 2 жыл бұрын

and max Academind

@punkgrl325 2 жыл бұрын

Also codedamn

@busyrand 2 жыл бұрын

Yeah... I jumped for joy when I saw this. I avoided React Router until recently and needed to help troubleshooting an issue.

@lycan2494 2 жыл бұрын

bro how u got 100k subs with vids with no views

@DThompsonDev 2 жыл бұрын

I am here with this video only having 100 views. Love knowing you are updating the React course and shows that you put effort to keep your content current instead of many courses leaving outdated content and still selling it when it doesn't always benefit the student.

@h.vats_ 2 жыл бұрын

Totally agree..

@RexGalilae 2 жыл бұрын

Yo I know you from Twitter

@AshishSingh-753 2 жыл бұрын

Hey you are from florin discord server

@kevyyar 2 жыл бұрын

100% agree. Unlike many instructors who never update their courses. And I know many of them lol

@mindaugaskrivickas8222 2 жыл бұрын

Lol. It is not updated. It is outdated!

@willadams6217 2 жыл бұрын

One other change would be that paths are now relative to the component, which is useful for nesting routes.

@Osama-kx3cq 2 жыл бұрын

Perfect timing sir....I was just doing your React.js crash course and got stuck at the Router part in the end. Thanks so much Mr. Brad and please keep up the great work

@NateRoberts 2 жыл бұрын

Just got a new job and we were all tasked with learning enough React to get started tinkering. The 2021 crash course as well as this update was a HUGE gift. Definitely felt like I had enough to proceed as well as going into our React training with a head start. Really appreciate this crash course!

@ColeCaccamise 2 жыл бұрын

Really excited to take the course over my winter break! I haven't even touched react in over a year yet was still able to understand so much of this video, really great job explaining everything Brad! Keep it up.

@Mike-vl4xi 2 жыл бұрын

Thanks for uploading this! I was doing the React crash course and came across that issue too. You have no idea how much you've taught me Brad

@sipp5657 2 жыл бұрын

holy shit just ran into the problem and improvised it! nice job keeping so up to date! you guys really keep track

@mcdonylee Жыл бұрын

It's awesome how you actually update this major changes for people who watches your React Crash course video years ago that is having several issue due to version upgrade🤣. Thank you for that !!! You are already doing a really good job. Take a break. You deserve it. (from nov 2022)

@radezzientertainment501 2 жыл бұрын

the timing on this vid couldnt be better, just got a routing requirement for my work and needed this!

@mohamedamineboudagga4621 2 жыл бұрын

Great video ! Thank you very much I've got struggle creating private routes with v6

@lisatom42 2 жыл бұрын

It’s funny you released this just 3 days after I updated to the new release and had these issues. Love your content, Brad!

@jaydeepgoswami909 2 жыл бұрын

Same here, just few days back I had created a task tracker app which had installed react router dom automatically and I didn't know why it crashed, later I found out that this library was changed and it was not working because these same changes which Brad sir showed today. Anyhow he is the best teacher. All the best

@usmanmohammedkafi6962 Жыл бұрын

Whenever I am having frontend issue I run to your channel, you indeed are an awesome tutor. Thank you Brad!

@JustMe-hv5re 2 жыл бұрын

thanks so much for updating this demo!

@elyasarkin0991 2 жыл бұрын

Thank you for updating us . Very useful. 😃

@daydreamical Жыл бұрын

Thanks a lot for the update!

@MeAsMeButMe 2 жыл бұрын

Yessss 🙌🏽🙌🏽🙌🏽 I've been needing this! I'll save this to my watch later list! I can't wait Brad, thanks! You're a legend.

@TahaZgued 2 жыл бұрын

Hey Brad, first congrats on your major impact to the community, awesome job man. Then writing tests especially unit tests is getting more and more required in the business even for junior developers. Do you think you can make some tutorials to get us starting ? For angular for example all videos out there are outdated (based on angular 5 at the very best)

@Cdswjp 2 жыл бұрын

I restate - I would absolute buy course that is thorough on unit testing. If it includes many other types of testing that is also taught thoroughly I would pay more.

@TahaZgued 2 жыл бұрын

@@Cdswjp I think many people would

@OhluhKayTall Жыл бұрын

As someone who just got to the end of your React JS Crash Course vid, appreciate you following up on this!

@mohitsaud2071 2 жыл бұрын

Thank you Brad for this update video.

@VidyaBhandary 2 жыл бұрын

Looking forward to the updated course !!!

@zackOverflow 2 жыл бұрын

Thank for the update, you are the best.

@LongTran-rq1oo 7 ай бұрын

thank you very much for your update!!

@ismailarame3756 2 жыл бұрын

thank u so much u saved me really appreciate you i was stuck because of routing upgrade from v5 to v6 thank u so much now i fixed my problem ❤❤❤

@jainikprajapati1632 2 жыл бұрын

Thanks for quick update on last video... I found these both videos really very helpful and for 1st ever react project for react journey.... Again thanks a lot😄

@jaydeepgoswami909 2 жыл бұрын

Just few days back I had created a task tracker app which had installed react router dom V6 automatically and I didn't know why it crashed, later I found out that this library was changed and it was not working because of these same changes which Brad sir showed today. Later I had to install the v5 library to make it work. Anyhow you're the best teacher Brad sir 😊. All the best

@VinceOhio 2 жыл бұрын

Thanks for the great Video Brad! I’ve found the new changes to react router to be great after you get used to them. And I feel they’ve made working with routing in React a lot easier to understand.

@NorbertWebDev 2 жыл бұрын

How can we just have exactly the same video idea :))) Great video as always dude, huge long time fan :)

@adilhesenov2962 2 жыл бұрын

I didn't know how to solve this problem for 4 hours. thank you very much

@ilykonst95 2 жыл бұрын

Informative and quickly, thanks!

@biswamohandwari780 2 жыл бұрын

Really you teach the main points. Very helpful 👍

@sahassaurav4144 2 жыл бұрын

Other changes in react router v6 are history.replace changed to navigate('/replace',{replace:true} and we also create routes object now in v6 just like vue router file and index prop is added to define start url of any routes and now we can nest Route component

@jawadshah8043 2 жыл бұрын

Hello Sir! I am from Pakistan. Your videos are really very helping for me. I have learnt MERN from your videos. I was facing difficulty in using react-router-dom v6. This video helped me a lot. Thank You May God bless you

@jonathanlancaster482 2 жыл бұрын

I think there's one change you forgot to mention Brad. The useHistory hook. I guess you could replace with the useNavigate. Or as the documentation suggests, you would install the dependency separately like so "npm install history@5".

@hugon4 2 жыл бұрын

Thanks for this video helped me a lot

@cj4717 2 жыл бұрын

Thanks for the video just did the crash course a week ago

@carlosalfredo657 2 жыл бұрын

Love your explanation! Nice work!

@emuolaogulu8840 2 жыл бұрын

Right on time!....Thanks for making this

@Missivylady 2 жыл бұрын

Thanks for this, very helpful.

@mi5956 2 жыл бұрын

short and sweet, no blufff. thank you

@oldgamer1299 2 жыл бұрын

Great work again! I've been waiting for this :)

@legacylifey7938 2 жыл бұрын

Thank you so much, really helpful

@parnasmi 2 жыл бұрын

Thank you very much, Brad! You are really doing much usefull stuff

@eduardtironmartinez7279 2 жыл бұрын

When navigating to a task's TaskDetails I noticed that I was continuously spamming GET requests to the server. In order to stop them I did this: in TaskDetails.js, on the useEffect hook, add an empty array ([ ]) as a second argument AKA its dependencies. This causes useEffect to execute only once when the component loads.

@madhavkwatra5888 2 жыл бұрын

Thanks , i too thought what the heck is wrong with my code🥲.

@anantbansal4995 Жыл бұрын

thanks for this

@akanshapanchal7107 2 жыл бұрын

Thanks you so much for this!

@landlord1047 2 жыл бұрын

thank you for your video!

@jeromyclassyca7063 2 жыл бұрын

Very helpful brad

@faruksardar8829 Жыл бұрын

Thanks for this Video Brad

@jatilyadav4000 2 жыл бұрын

thank you soo much....helped me a lot...

@Ant-um7ym 2 жыл бұрын

This channel is great , before when I was learning web development I learned alot from this channel. I changed over to game development which I love more. But really helpful stuff with these videos especially to new people to we'd development 🤠

@medAmineRg 2 жыл бұрын

thank you so much brad

@rp2804 2 жыл бұрын

Thank God I found this video!

@fadidib8516 2 жыл бұрын

thx for putting a link from crash course react was going to start learning react :d

@freivincampbell 2 жыл бұрын

Nice, thanks so much for it

@sultondev 2 жыл бұрын

thanks a lot to you for this course

@theiio_6526 2 жыл бұрын

thanks you a lot great video

@ahmaat19 2 жыл бұрын

I was planning to read it from documentation but it seems enough of what I wanted :)

@countmein5164 2 жыл бұрын

I was stuck with errors in the 2019 react crash course and this video pops up ( rip algo) right after I solve it myself. Didn't know dom was updated with these many features

@Davyhatesu 2 жыл бұрын

THIS WAS AMAZING!!!! THANKS!!!

@abdellahdamri656 2 жыл бұрын

Great Content Brad, Thank you !! I was just wondering if you could make a tut about how to build and publish (CDN and on NPM) a CSS Framework that would be awesome Thank u!!

@KevinVandyTech 2 жыл бұрын

I just spent a couple days reading the v6 docs front to back and refactoring our apps where I work

@muzafferhassan 2 жыл бұрын

Thanks Brad

@LuisBlancoAustin 2 жыл бұрын

Thanks, Brad!

@fishingtrippy 2 жыл бұрын

Alright. Just completed the crash course and this update video. Time to start applying for jobs!

@rudolfferenckovacs812 2 жыл бұрын

Thank you!

@kalahari8295 2 жыл бұрын

For making changes on a code with old syntax ❤️🔥 Wished useHistory was in the video tho

@navidmafi 2 жыл бұрын

Thank you

@OneCSeven 2 жыл бұрын

thanks for this bro im currently using react router and i wanna upgrade.

@akifanvar1902 2 жыл бұрын

Thanks for v6♥️

@warrenhenning8064 2 жыл бұрын

React itself does a good job of backward compatibility and allowing developers to gracefully evolve their code over a reasonable period of time. Many of the other libraries, though, especially React Router (which every React project I've worked on has used) don't give a fuck.

@Sebastian-hg3xc 2 жыл бұрын

Thought the same. Why the heck do they rename and slightly change things, just to cause trouble? One reason not to use react router.

@Stoney_Eagle 2 жыл бұрын

They just could have deprecated it 🤷🏼‍♂️

@mikopiko 2 жыл бұрын

Any good alternatives to React Router?

@9SMTM6 2 жыл бұрын

Honestly, it's annoying with react Router, but ultimately its impact is fairly limited and usually easy to fix. Redux though? I hate one of their maintainers, he doesn't give a shit. State logic is very difficult to change without breaking things. Admittedly people that started that Project that had issues did some questionable things, but they were at least pushed to that by how unergonomic Redux is with some things (compare to eg Vuex). Then these jokes go ahead and remove a feature without any depreciation period, with some additional changes and shitty documentation, and no recommendations for alternatives to the patterns they deemed so bad they outright and purposefully banned them. Great way to get people stuck on old versions.

@skyzhangty1 2 жыл бұрын

@@mikopiko react location

@MicMokum 2 жыл бұрын

Thanks for this "tutorial"! :)

@aaronnolan5377 2 жыл бұрын

Would be nice to see example of a Route as a child of Route as shown in the react-router docs

@the_coder241 2 жыл бұрын

Thank Brad!

@johncoleman6293 2 жыл бұрын

Brad, I've been on this journey for the past 3 years, and you've been a constant blessing throughout. Thank you!

@hanesmitter1469 2 жыл бұрын

You can also create object based routes with react-router-v6

@dmitry_kolotilshikov 2 жыл бұрын

Thk for the tutorial. What VS theme do you use?🌿

@Hunt92 2 жыл бұрын

Damn this new syntax really feels clean route goes in routers route get an element, a hook for navigation

@aamin89 2 жыл бұрын

Thanks Brad. This is a very frustrating update 🤯

@abeebayinla4858 2 жыл бұрын

Good change. Thanks brad. What of "withRouter". I saw a change also in react-router-dom version 6 that "withRouter" is no more available but don't really know the alternative for it.

@markslima1557 2 жыл бұрын

Hi Brad, I'm doing your React crash course it's AWESOME. I want to take the full React Front-to-Back, are there any coupons available? I missed the sale. :)

@xninja4007 2 жыл бұрын

The crash course was great, and this update a great follow up. :clap:

@ronscheibel7770 2 жыл бұрын

I took a 2 year old bootcamp that taught class components and reactRouterDom v4. I’m trying to convert to v6 on my livestream but running into problems with match and Params. Where should I start? Should I learn and practice hooks? Revert to v4? Switch to another problem?

@mohammedhassanyusuf1617 2 жыл бұрын

Thanks

@Vikas_Singh_Kushwaha 2 жыл бұрын

Damn much needed video

@altafmalik2843 2 жыл бұрын

How to use nested routes in V6? I am getting warning showing no routes matched for route /ask

@alexandersetiadi9317 2 жыл бұрын

do you know how to pass value from page to another page, like when login from loginpage, i want to set it IsLogin = true and show the main page. i know we can do it via sessionstorate and localstorage but its not safe si is there another way to do it?

@jamesdamildetienne326 2 жыл бұрын

hey nice course, I got a question, is it possible to use useParams in a class component with v6 ? i am getting this error"React Hook "useParams" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks" any help please thanks

@marcosochieng5175 2 жыл бұрын

I'm here within a minute, thanks brad

@InvincibleMan99 2 жыл бұрын

Can we use Navigate inside class component just like the way you used here in functional components ?

@aniltonf Жыл бұрын

Hi there. I'm using react v18.2.0 and cannot get the form to work. When I put variables on the value the field becomes disabled and cannot write on it. Some help?

@ozzyfromspace 2 жыл бұрын

I remember having started a new project days after the update and being so confused at why react-router-dom wasn't working. lol it made me feel really dumb. Anyway, learning new things might be irritating for a bit, but imho the breaking changes really streamlined the api. and there are so many other cool features in the new api.

@StrengthFromGiving Жыл бұрын

Usually love all of his stuff, but this one was really hard to follow. I'm going to have to check around and see if I can find another video to explain the differences. But, its probably just me.

@saskirakosyan5268 2 жыл бұрын

Thanks, you missed nested route, this is also important

@sayyedmaroof5051 2 жыл бұрын

Thanks sir ♥️

@aprilmintacpineda2713 2 жыл бұрын

the jsx on element should render that component right?

@SonAyoD 2 жыл бұрын

great video

@marionyangintaka1455 2 жыл бұрын

Hello Brad...Thank you for this video. I am on your Udemy MERN Ecommerce Project. Do we have an update to React Router Dom@V6 because I can't get to have the List of Items render on the client HomeScreen? I'm stuck here lol.

@andresvivanco1758 2 жыл бұрын

I got stuck in the final stages of a the PROSHOP e-commerce course with DRF api and react. Stuck in the pagination. I'm able to navigate to a url adding the keyword and page number but I can't get that second page to re-render with the correct content from the Django rest framework api. It works in postman, that is the weird thing.