React Router V6 Tutorial - Routes, Redirecting, UseNavigate, UseParams...

Подписаться 214 тыс.

Просмотров 278 тыс.

50% 1

Hey everyone, in this video I teach you all the new version of React Router Dom. I have an old video teaching this topic, but with the update a lot has changed.
🌟 Get 20% Off Brilliant: brilliant.sjv....
Code: github.com/mac...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
💻 Join our Discord: / discord
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #reactrouter

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 536

@benihahitti3513 2 года назад

Great Job, extremely clear and concise. It's always good to stay on top of the latest updates and changes.

@PedroTechnologies 2 года назад

Glad it was helpful!

@cristinalopez8667 2 года назад

Thank God I found your video. I'm a recent bootcamp graduate and was going nuts trying to figure out why my React apps had had stopped working!

@hirealgore 2 года назад

AMEN! Spent all day on this because I was working with DOM5 commands. THAKN YOU !

@seagypsy2591 2 года назад

Thank you!! I had been searching for days on how to use the useNavigate bit. I am new to react and most other tutorials just rush through telling you what to type but don't explain why you type it. I learned more from the first half of your tutorial than i have from all other tutorials combined.

@sslab33 2 года назад

By far the best tutorial for react router v6 Every thing needed to start react router in just 20min

@alawy5551 2 года назад

8:40 Yesss thanks!! I watch tutorial about building React website and I struggle with this step he used this : path='/' exact component={Home} Technology changes fast :)

@amirmahdimohamadian6732 2 года назад

I never comment on videos, but DUDE... you are a life saver! Thanks for everything!

@Kidz-code-t9i Год назад

Thank you so much... This is the simplest explanation i have seen for react router dom

@parvatprajapati8932 2 года назад

You just showed every important topic related to react-router-dom very well. with changes of older and newer version. Thanks

@realdoomerhours 2 года назад

This is a way better tutorial than the actual React documentation, great job.

@ultimatesheep 2 года назад

documentation is just like manual Nobody reads it

@caracalmanhique9260 2 года назад

@@ultimatesheep kkkk

@wyvrendragon4175 2 года назад

Aggree😂

@Joao-oo8yj 2 года назад

@@caracalmanhique9260 br?

Год назад

This is absolutely gold my friend. Keep going like this. I love you.

@LazAustin 2 года назад

You are awesome man. I'm learning React as we speak and the tutorials I was using were basically obsolete and you bridged the gap.

@SUPREM00 Год назад

Finally someone who knows how to teach

@captainbeardedman7645 2 года назад

Very useful tutorial. Google was of no help for me 2022. But this video just made sense.

@002ashishkumar5 2 года назад

Omg!! greatest explanation ever, cleareed all my doubts , thnx i always watch ur videos cuz its a lot clear and to the point

@PedroTechnologies 2 года назад

Thank you!

@noelpadavan5674 2 года назад

This man stays reading my mind, just when I need this. Thank you!

@derickasane8499 2 года назад

very clear and intuitive. thanks pedro

@TheRealAfroRick 2 года назад

Very clear, but you should also consider that someone may be coming to this content who has never see react-router-dom - EVER. I've been using react long enough to follow what you're doing, but as opposed to covering the changes, if you're doing a tutorial you have to cover it from the noob perspective.

@gouravchouhan1790 2 года назад

Your channel === GEM💎

@davidelbaz9188 Год назад

You explain extremely good !

@cloudietech5825 2 года назад

Man is a genius on React

@PedroTechnologies 2 года назад

You too broo

@adeniyismart8539 2 года назад

Awesome work, just what I needed

@athmajaashinsani5469 2 года назад

You're a life saver! Thank you so much!

@jennywilliams8063 2 года назад

Fantastic tutorial! Two questions: 1. What's the VSCode command for getting rid of the parens () in Profile.js at 7:45? 2. In App.js, how does the import for each page automatically get added after you insert each Route path? For example, line 3 gets added at 8:25 for the Home path.Is it an extension?

@eneadriancatalin Год назад

1. ES7+ React/Redux/React-Native snippets 2. it's an extension called auto import with over 2M installations

@fewzyayimam9366 2 года назад

you are the legend

@KromedesShooter 2 года назад

Thank you for this video bro! new sub!

@PedroTechnologies 2 года назад

Thanks for the sub!

@hajimeippo804 2 года назад

Thank you very much sir! Awesome explanation :)

@RD-zz9xw 2 года назад

Good vedio. Learned about Routes, useNaviagte. Had a small question . what is usage of adding exact and not using exact for routing?

@PedroTechnologies 2 года назад

Thank you! I believe the "exact" property isn't used in version 6 anymore. It used to be used in V5 but not in V6.

@jamesonvparker 2 года назад

Perfect video at the perfect time. New Subscriber and I love your channel!

@farhadfallahi8200 2 года назад

Perfect and Quickly ❤‍🔥

@shauryasharma190 2 года назад

Thanks alot man really helped me out a ton

@kacperj780 2 года назад

well i tried watching plenty tutorials and only your worked, thank you so much. Also what is this vscode theme?

@animishprateek3578 2 года назад

Thank you so much for this! It helped a lot!

@vivekpaliwar7217 2 года назад

Pedro can you make the video on how to work with nested routes :) .

@nanonkay5669 2 года назад

Honestly switched to using Next JS just because of routing 😂

@brkeudunman 2 года назад

thanks for explanation

@Mdelacruzmelo 2 года назад

Thanks man! You just saved me

@raymondgerardo9808 2 года назад

very clear tutorial. Thanks!

@ammarsharif609 2 года назад

Helped a lot 💖

@ControlAllDa1337 2 года назад

Really nice and simple tutorial thank you. I have a question if anyone can help. My app uses a Navbar component as a header and footer which I have displaying on every page as intended, but what I would like to do is have a landing/login page as an entry point for the app for users that aren't logged in, but I don't want the landing page to render any header/footer components. I believe this was easily done in previous versions of react-router by using the IndexRoute, but this isn't supported in v6 and I can't find anything online that has been helpful

@swati1657 2 года назад

great video..keep going 👏👏

@josephgutierrez6185 2 года назад

Thanks!

@PedroTechnologies 2 года назад

Thank you for your support!

@flynauto5634 2 года назад

Thank you so much bro

@codewithkaran8860 Год назад

Really helpful 😀

@mahdih6453 2 года назад

thank you very good totarial

@ronscheibel7770 2 года назад

I took a 2 year old bootcamp that taught class components and reactRouterDom v4. I’m trying to convert to v6 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?

@newmanpredko Год назад

Thank you well explained love it ! Much appreciated and up to date.

@Chrisbees 2 года назад

How can I make use of useNavigate in a class component?

@Regalman 2 года назад

THANK YOU VERY F**KING MUCH. I LOVE YOU

@hassaantahir3861 2 года назад

Hello brother I have a problem in routing between different components. Whenever I click on ( about or contact) the URL changes like from abcd to abcd/about but the page doesn't load. Can you help me in this ..

@scuffedversion4583 2 года назад

13:45 is this actually how it works and there is no other way to like remove the other parts and only show the component linked in ????????

@esrommulugeta5643 2 года назад

what about withRouter() function it the functionality removed or is it changed like the others?

@MustafaTurk35 2 года назад

@espiritullama 2 года назад

thanks you

@tushardixit679 2 года назад

hey! can you help me i am having trouble using useLocation in react-router-dom v6 version passing data but it is not passing

@arinzechukwuhillary0zor644 2 года назад

how can i navigate to a page without showing the navbar and footer

@ibrahim_youssef_13.12 2 года назад

Awesome

@brilliantatosam 2 года назад

This is a timely intervention. God bless you, Pedro!

@PedroTechnologies 2 года назад

Hahaha i was waiting for so long for the React Router update to make this video

@izatydita 2 года назад

This tutorial is exactly what I'm looking for. And your explanation is very clear. It's a helpful tutorial. Thanks, Pedro!

@raphaeljaggerd3585 2 года назад

Thanks bruv it took me forever to realise my errors were caused by v6

@PedroTechnologies 2 года назад

Hahaha im glad I helped!

@alowe5013 2 года назад

You have no idea how much of a difference this video made to my life today. Thank you so much - such a clear, easy to follow video. So grateful!

@kajolghoshkkg5512 2 года назад

please make a tutorial on nested routing with react-router-dom@6 which will be very helpful as always

@PedroTechnologies 2 года назад

Yes! I will make a video about it soon!

@shawnlee5956 2 года назад

nice video ~ how to router dom work wih 'protected route'? or other words how to block unsigned in user to access the route?

@VijayVijay-bi8mj 2 года назад

16:25 Is it good to use as= Link in button tag to redirect to other page ... as=Link to="/about">click

@petritmekuli 2 года назад

Short and really helpful. Anyway when you said you can use any of and that's true, but I think it's important to mention that and are different. Because the component makes possible SPA(single page application) and is the old way of doing request. And that's kinda big deal.

@caffeinated-pixels 2 года назад

Cool, this helped me migrate an app from v5 to v6. Thanks!

@PedroTechnologies 2 года назад

Glad it helped!

@huskypsycho7833 2 года назад

AMAZING video dude... ive seen some of your past ones and they were really helpful but i still had so many issues and i had to find replacement methods to do all the things you said in @6.. this video was straight to the point, great explanation. Thanks again and JUST when i needed it too....

@PedroTechnologies 2 года назад

Hahaha thank you! Glad you liked it!

@jazioxmugen Год назад

I am having problems with the timestamp at 9:14. There is nothing on my screen, and I followed all of the instructions. The screen is just blank. How can I put the words on the screen for each page?

@alpaynamazi 2 года назад

if we go to /profile we're gonna face not found page. How to deal with it Pedro?

@stephanpaul8954 2 года назад

Ehhh Pedro is in BC! (ICBC) 😂 watch your vids lots never commented

@PedroTechnologies 2 года назад

I live in Vancouver hahaha

@rafaelalexandre9045 2 года назад

Nice video! I'm trying to use the useNavigate inside an async function. There's a login form, and on form submit the async function is called. The URL is updating, but it's not redirecting. Do you know why?

@Tux256ND 2 года назад

Dude! This is just the explanation I needed. Most videos we see are for people coming from v5 to v6, but you got me covered, even me not knowing much, even from v5! Thanks a lot, mano!

@crazybigworld9357 2 года назад

Great tutorial. Thanks a lot! Are we not using switch anymore in v6?

@PedroTechnologies 2 года назад

Noo, we use something called now

@一脸滑稽-k5v 2 года назад

Thanks a lot for your videos ~ I'm still learning web developing, and found your videos so helpful !

@jazioxmugen Год назад

I get a blank page. I have been through the whole project word for word

@jvandco30 2 года назад

Very very thank you brother. I spent 4 hours for routing using switch and later I came to know that switch does not work in higher versions. Your video is very very useful. Please continue your contribution to the world in a positive way.

@PedroTechnologies 2 года назад

Glad it helped

@innovatorshome 2 года назад

Attempted import error: 'withRouter' is not exported from 'react-router-dom'. **i got this error in v6 ** please somebody help me

@farihanashih2131 2 года назад

Thank you very much sir. I am a beginner in React and very confuse when i learn the old method. i don't know there is change on react-router-dom syntax in v6. GREAT EXPLANATION

@noiith99 2 года назад

Route displays blank page ….??

@TheUltimateChamps 2 года назад

Hi Pedro, I need some help I have a scenario where I have two navigation bars 1. First one has 4 buttons which should display the second nav bar below with two options and route should change. 2. For example if I click insert button in second nav bar it should display /home/insert and if I click display it should show /home/display. Instead it shows /home/insert/display Note: I have used useLocation() to get the exact path because I can't create different nav bars for every button Requesting everyone to help me on this. 🙂

@ManpahulSingh 2 года назад

I was following a react tutorial series where the instructor used router v4, and I installed router v6 thinking it should be better and since the history, location and match props do not exist on router v6, I spent hours figuring out why I don't have these props anymore and why is my console all red. Finally I landed to this video. Thanks a lot man, you earned a sub :)

@realdoomerhours 2 года назад

I'm currently going through the exact same thing. Glad I found this video because I was about ready to throw my laptop out the window.

@artemmarketer5745 2 года назад

@@realdoomerhours Nice for you cuz I'm already using a new laptop for the same reason.

@realdoomerhours 2 года назад

@@artemmarketer5745 You have my sympathies.

@changgiljeong9820 2 года назад

Thank you so much Pedro, Your videos are always amazing!

@TechWrathTV 2 года назад

how can we only show header, sidebar or footer in dashboard and not login page. Login page coming in "/" in route

@patilashish 2 года назад

How to pass an object to next page with useNavigate() ? I tried :- return ( cardClicked(navigate("/Details", item))}> ) It navigates successfully but item object is blank on details page. i checked with console.log in current page, prints item successfully. not sure whats the issue ?

@orwa475 2 года назад

anyone having a blank page when doing this ?

@WhiteWindProduction 2 года назад

Great video but only citism is that try use a quiter keyboard :)

@PedroTechnologies 2 года назад

I ordered one and it came yesterday hahaha next videos will all be using a quiet keyboard

@_STF2023_the_camera.kinemaster Год назад

Thanks for this video. I created this function on button click and it doesnt work the navigate. I want to send a object to edit using the storage. Is there anything error on this? async function Edit(obj) { try { localStorage.setItem('editDoctor', obj) navigate("/doctor/edit") } catch (error) { console.log(error) } }

@aniketa.raikwar1983 2 года назад

Please tell me your vs code theme name....

@oneinchmoon 2 года назад

Thank you Mr. Pedro nice mechanical keyboard btw

@PedroTechnologies 2 года назад

Glad it helped! I am actually going to replace it with a muted keyboard for videos cause I don't want the sound appearing in the video hahaha

@sivashankarim2141 Год назад

utils.ts:757 Uncaught Error: useNavigate() may be used only in the context of a component. why am getting this error, please help me

@NareshBazidpuria 2 года назад

thank you sir. it helped me a lot

@andresvivanco1758 2 года назад

Pagination: I'm able to navigate to a url including the keyword and page parameter but I can 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. Stuck in this final part of this project, please help!

@RV-kl2wl 2 года назад

Perdro I cannot thank you enough. Whatever I need, i find on your channel in a very concise and easy to understand video. Keep up the good work. 100k soon 🙏

@gonzalooviedo5435 Год назад

Very clear explanations, thank you, Ive already seen 2 complete videos from you, this one and the another one explained react hooks!. Thanks from Chile!!!

@nikolaychankov8252 Год назад

I am using Gatsby for my react app with router v6 , and the navigation looks good but when i am not on home page but on some other and refresh the page , or simply type the page i want to access , it does not load the navigation .....just the page content , It is like its not loading from the index.js , but onl the component js file. Any suggestions

@AlexisScuderi Год назад

Thanks bro, useParam will be very usefull in my actual project. I started watching this video just to see if i learn something new about react route because im very new at it, and i did

@cadencameron8327 2 года назад

I tried to implement the router in my own project. However, the page won’t switch between the routes unless I manually refresh. I can see that the route is changing in the search bar but the page itself isn’t changing, any fixes?