React Router V6.4+ Tutorial - New Syntax, useLoaderData... 

The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/pedrotech12221

I really do prefer the older version of React Router, the more simple way of doing things. Since version 6 there has been a big change and I don't like the way we create the router

I didn't find anyone who knows how to explain more than you.. you are the best in the world by the way I am Arab and I am learning English from you

Amazing explanation Pedro, you are literally carrying us on your back. Thank you!

I think this is a very helpful update for programs passing props. As an entry level react front end dev. If im not using typescript, getting an error message that an object isn't defined and needing to go through all the components that manages that prop is so time consuming. It also helps when you don't want to refresh the server but need to make changes that would allow you to see how a resource would be rerendered on the page.

pedro i thank u so much i started with u from zero and now i become an advance in react thank u so much habibi

You helped me a lot to understand why there is all the change in syntext Thank you very much !

Was looking for a brief yet useful tutorial on React Router 6 and yours does it amongst all others in youtube! Very well done. Thankyou for providing this!

Older version was quite simple compared to new one

A really good teacher needs - not only a great teaching skill but also THE skill to simplify information... And I really impressed of yours.

Thank you so mach man! I have updated my personal project with the new data loaders according to your explanations - it works perfectly! Solved me a problem with fetching data!

Thanks bro it was super confusing I was reading the docs but some concepts were too confusing. Great thanks

amazing pedro. it is really hard to any content of yours where I didn't learn anything new! best wishes keep making us more knowledgeable.

Man, just THANK YOU! I've been trying to understand how to use the React Router using their tutorial on their site. But, few things were just not making sense. Tried a hand full of tutorials here, but none were quite good. Then I thought, I'll see if Pedro has anything on this. And you did have it. You made it SO MUCH easier to understand. PLUS, you also helped with something I wasn't expecting...which is the loaderData. I've got a RN app, and am creating a landing page for it. So now, I'll refactor my RN code, so I can use the loaderData, and finish this landing page as well. Muito obrigado, mano!

Thanks. I think that this video should have start with - How did you do the element on the screen and its glowing purple/blue effect :)

Thank you so much for this. I was struggling with the new syntax and your explanation was really on point.

I find it astounding that web developers successfully went from a simple to whatever this is

I still prefer using redux toolkit using RTKQuery as a loader for data and handling states. But it's handy i admit it

Could you explain how React Router v6.4+ handles dynamic routing and what improvements have been made compared to previous versions?

Could you please make a new Tutorial about cookie/sessions, and How to use them on different Pages, Like logged on as, etc. 🙏🙏🙏 Your the best guy about react/node

To be honest this new way of routing is super complicated.

Hey pedro, can you please make a video on Next.js 13

Thanks Pedro, please when you have time make a video on Router with loaders, actions and Firebase Authentication

Thanks Pedro. This is amazing. So imaging having lazy loading, react-query and this 🤯🤯🤯. Happy holidays too

@PedroTech can u please do a course for svelte i have question is it good for someone know the react ???

Great tutorial! Was a little confused by the new syntax

I think this update is good for larger systems that uses more data also upon seeing your tutorials i guess it made easier hehe hope try using this on other tutorials

i think this update killed page transitions with framer motion, it's basically impossible now, or am i wrong?

Thanks for the video!! Could you create a video on how to create Protected routes using v6.4 and newer. Thank you!

Thanks PredroTech for the latest updates and as always your the best.😊

Thank you for the tutorial. This really helped. I'm not a big fan of this new syntax because it's not as intuitive as the old one. Although I do appreciate the less lines needed

Can make a tutorial with framer motion an how u would configure the routes like how did in the past video it would be helpful

How about defer()

One question: what if there are two dataLoader functions like dataLoader1 and dataLoader2 fetching two different data, how would you add it to loader={} ?

Make me want to master react instead of staying in basic html and css lol thanks!

Hey Pedro, can you please make a video on OTP with react, SQLand node when you forget your password and email verification.

Thank you for explaining this so well! You are the best!!

For the new beginners would you recommend to start with this or no ?

Hi, beginner question, Just wondering how about doing some rerender on useLoaderData? like in common way we do on useEffect we can add state inside [ ] to listen if something change in your state then execute the fetching again.

03:08 - Defining routes 12:05 - Data fetching in React 14:38 - React-router loaders 20:41 - Loading indication

What a explanation man 🙏🙏👍👍

Okay they made it more complicated.

Hy. Can I do a frame with header, footer, and use Roters that only the middle part do refres? I hope you understand my basic english. Thnak you

Why have you attached a MySQL tag to this video? Not a mention of it?

The video is ok but changing from one IDE to another its a little confusing

Can you make a video about deploying the vite app with react-router-dom 6.6+ to GitHub pages?

Please, make video about JWT key for registration. I didn’t find any good video about this theme. Help me to study it🙏

So react router now does pre-rendering? Nice. Thoughts on tanstack router?

You have to use new syntax with loaders and bunch of other stuff only If you require to use new Data APIs. Otherwise you can continue using JSX syntax

Doesn't react-router-dom offer 'browserRouter, Route, Routes' by default? Thus no need for you to create them, you could use them directly. Why are you creating them manually? There must be a good reason for it, I'm curious what it is if you could explain. Is it just a better practice maybe?

Okay thanks. Could you turn it into a navbar?

18:48 annoying bug

The login pop-up that shows up every 10 seconds is really distracting.

Thanks man...much appreciated ☺️👍

It won't show the children route whanever I visit child root path it still shows the parent route element . It is happening with both the object syntax and jsx syntax. And also naviagtion state is always idle.

pls drop a video on the new react router hooks

Can we make post request for second route using form data from first route without UI-state library? Thx

i was getting "uncaught runtime error" while working under linux and the troubleshooting stated that i had multiple versions of React-dom installed. I found that i had multiple versions but they all were the same according to npm. I installed everything on my windows 10 side and i used this tuto to find out if Router works. It did. How can i fix my problem on my linux side?

This was so informative.

hi want create router modal in v6 but, i can not useLocation() in app.jsx , could you create video to guide, tks you so much

thanks, its really helpful

You are the best love your videos.

Ur tutorials are best

its a helpful feature but is this relevent if i'm using RTK query and is the old syntax for react router not valid anymore can i still use it normally ?

Bro forgot to cut the mosquito part😂

What if we had multiple API calls in a component?

React Router 6.6.3 how do we pass useLocation? it now uses createBrowerRouter I want to do page transition using framer motion but the problem is I dont know where to add the useLocation

Wait what should I learned 🤣 should I learn this new or the other one

incrível o vídeo, parabéns!

You're AMAZING BRO🔥🔥 🔥

browserRouter is not workine when i create a build by npm run build to generate an index.html file then i open index.html file in my browser it show a blank page. but when i change browserRouter to hashrouter then it it working fine

thank you✊🏾

Does this work on localhost? data isn't fetching for me and this is hard to debug

Pedro, u r awesome!

Pedro how can i manage url params, i was doing a component which needed an id to render some data, but with the new version i got stuck with it :(

Thanks a lot!

Thank you so much

How can i do AnimatePresence in this new routing script?

Great video but these new features just seem like worse, more complex versions of Next 13 features 😅

Do you still have to use Hashrouter to deploy to github pages?

How to use it together with MUI?

Can't I use this dataLoader in the old style? At the end its benefit lies in asynchronous call which I can also use in the old ways, can't I? I will have to test it now (watching this video in a car.)

Cool update

Thanks

thanks so much for this video. However. can we agree on something all of us? did you realize what it takes now to just have a fu*** navbar ? :D

Please do redux saga with redux toolkit to fetch api updating editing creating with axios please 🥺

nice one

I got into react router after the major update and I'll say that the new method is very easy to use and read unlike the scary switch that looks boring in past versions. the object format is very good for me.

Awesome video ++++++++++++++ 🙂

Really miss the old version. It was a lot easier.

router 6.3 is way easier to setup

Dont like too much , tanstack Is better

Honestly I see it's in most cases a useless update just with complicated syntax

hmm

better use atomic router instead. react router becomes a trash.

the API changes on every version they release LMAO such clowns

React routing system is really bad. A big rotten ball of random stinky mud made by lazy corporate "devs". Basically pretty much like anything else coming from FB actually. So opinionated in the most evil way. So complex. So limitating. Horrible.

you are too confusing you don't even know things well and push f with annoyed things

Thanks