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
You don't have to use an older version. What Pedro is showing is a new feature designed to solve a specific problem. BrowseRouter, Routes, and Router still works the same, but if you have thunks in Redux, or an API to manage and you want components to load irrespective of the store update or the status result of the API this would be a way of circumventing the error boundary preventing the app from compiling
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.
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!
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!
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!
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
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
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.
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
One question: what if there are two dataLoader functions like dataLoader1 and dataLoader2 fetching two different data, how would you add it to loader={} ?
In this case you can create a single function and inside this function, you can use Promise.all envolving the other data fetching functions, and use this function to put it in loader.
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?
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.
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?
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 ?
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
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.)
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
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.
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.
The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/pedrotech12221
please do video on redux saga with redux toolkit and perform CRUD operation in API please 🥺🥺🥺🥺🥺
they don't fucking know what to do and need to keep their job so they release useless features every months
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
This is for more complex websites, who want to write better, cleaner code and you can still use the old setup in 6.6+
@@virtualalphastudios6149 yeah I'd use the older version for my personal projects
You don't have to use an older version. What Pedro is showing is a new feature designed to solve a specific problem. BrowseRouter, Routes, and Router still works the same, but if you have thunks in Redux, or an API to manage and you want components to load irrespective of the store update or the status result of the API this would be a way of circumventing the error boundary preventing the app from compiling
react-router 7 will change things again, everything that you see here will be obsolete in 6 months.
@@CuriosityCircuit2024 true. It becoming burdensome to keep up with technology 😂
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
I find it astounding that web developers successfully went from a simple to whatever this is
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
Older version was quite simple compared to new one
i'm using react router v6 and not 6.4, i'm just new to react, and i just learned v6 , now i'm seeing v6.4
Amazing explanation Pedro, you are literally carrying us on your back. Thank you!
A really good teacher needs - not only a great teaching skill but also THE skill to simplify information... And I really impressed of yours.
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!
03:08 - Defining routes
12:05 - Data fetching in React
14:38 - React-router loaders
20:41 - Loading indication
I still prefer using redux toolkit using RTKQuery as a loader for data and handling states. But it's handy i admit it
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.
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 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!
You helped me a lot to understand why there is all the change in syntext Thank you very much !
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 bro it was super confusing I was reading the docs but some concepts were too confusing. Great thanks
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
@PedroTech can u please do a course for svelte
i have question is it good for someone know the react ???
Could you explain how React Router v6.4+ handles dynamic routing and what improvements have been made compared to previous versions?
Thank you so much for this. I was struggling with the new syntax and your explanation was really on point.
For the new beginners would you recommend to start with this or no ?
To be honest this new way of routing is super complicated.
Great tutorial! Was a little confused by the new syntax
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
Hey pedro, can you please make a video on Next.js 13
Thanks for the video!! Could you create a video on how to create Protected routes using v6.4 and newer. Thank you!
i think this update killed page transitions with framer motion, it's basically impossible now, or am i wrong?
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
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.
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
Make me want to master react instead of staying in basic html and css lol thanks!
Why have you attached a MySQL tag to this video? Not a mention of it?
So react router now does pre-rendering? Nice. Thoughts on tanstack router?
One question: what if there are two dataLoader functions like dataLoader1 and dataLoader2 fetching two different data, how would you add it to loader={} ?
In this case you can create a single function and inside this function, you can use Promise.all envolving the other data fetching functions, and use this function to put it in loader.
Thank you for explaining this so well! You are the best!!
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?
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
What a explanation man 🙏🙏👍👍
Hey Pedro, can you please make a video on OTP with react, SQLand node when you forget your password and email verification.
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
Okay thanks. Could you turn it into a navbar?
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.
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?
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
The login pop-up that shows up every 10 seconds is really distracting.
How about defer()
Ur tutorials are best
Can you make a video about deploying the vite app with react-router-dom 6.6+ to GitHub pages?
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 ?
Thanks man...much appreciated ☺️👍
Do you still have to use Hashrouter to deploy to github pages?
You're AMAZING BRO🔥🔥 🔥
thanks, its really helpful
Okay they made it more complicated.
You are the best love your videos.
Please, make video about JWT key for registration. I didn’t find any good video about this theme. Help me to study it🙏
This was so informative.
Pedro, u r awesome!
The video is ok but changing from one IDE to another its a little confusing
Can we make post request for second route using form data from first route without UI-state library? Thx
thank you✊🏾
pls drop a video on the new react router hooks
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!
Bro forgot to cut the mosquito part😂
Hahahha i showed this to my editor and we fixed it :)
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
incrível o vídeo, parabéns!
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.)
Yes, it works in the old way using, as you were showing at the beginning useEffect and useState. Thank you anyway for that video.
Does this work on localhost? data isn't fetching for me and this is hard to debug
How can i do AnimatePresence in this new routing script?
Thank you so much
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
18:48 annoying bug
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
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.
What if we had multiple API calls in a component?
How to use it together with MUI?
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
Cool update
Thanks
Great video but these new features just seem like worse, more complex versions of Next 13 features 😅
nice one
Really miss the old version. It was a lot easier.
Awesome video ++++++++++++++ 🙂
Please do redux saga with redux toolkit to fetch api updating editing creating with axios please 🥺
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