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!
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.
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.
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
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.
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
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 ?
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
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
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?
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.)
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 😂
03:08 - Defining routes
12:05 - Data fetching in React
14:38 - React-router loaders
20:41 - Loading indication
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.
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
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
Amazing explanation Pedro, you are literally carrying us on your back. Thank you!
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
I still prefer using redux toolkit using RTKQuery as a loader for data and handling states. But it's handy i admit it
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!
A really good teacher needs - not only a great teaching skill but also THE skill to simplify information... And I really impressed of yours.
You helped me a lot to understand why there is all the change in syntext Thank you very much !
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.
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. I think that this video should have start with -
How did you do the element on the screen and its glowing purple/blue effect :)
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 explain how React Router v6.4+ handles dynamic routing and what improvements have been made compared to previous versions?
Great tutorial! Was a little confused by the new syntax
Hey pedro, can you please make a video on Next.js 13
Thank you so much for this. I was struggling with the new syntax and your explanation was really on point.
@PedroTech can u please do a course for svelte
i have question is it good for someone know the react ???
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.
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.
i think this update killed page transitions with framer motion, it's basically impossible now, or am i wrong?
Thanks Pedro, please when you have time make a video on Router with loaders, actions and Firebase Authentication
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
Thanks for the video!! Could you create a video on how to create Protected routes using v6.4 and newer. Thank you!
What a explanation man 🙏🙏👍👍
Thanks Pedro. This is amazing. So imaging having lazy loading, react-query and this 🤯🤯🤯. Happy holidays too
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
Thank you for explaining this so well! You are the best!!
How about defer()
Ur tutorials are best
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.
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
Thanks PredroTech for the latest updates and as always your the best.😊
Hey Pedro, can you please make a video on OTP with react, SQLand node when you forget your password and email verification.
thanks, its really helpful
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
You are the best love your videos.
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
This was so informative.
Can you make a video about deploying the vite app with react-router-dom 6.6+ to GitHub pages?
Pedro, u r awesome!
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?
You're AMAZING BRO🔥🔥 🔥
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 ?
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 :(
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
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?
Please, make video about JWT key for registration. I didn’t find any good video about this theme. Help me to study it🙏
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
thank you✊🏾
Thanks man...much appreciated ☺️👍
Thanks a lot!
Make me want to master react instead of staying in basic html and css lol thanks!
incrível o vídeo, parabéns!
Can we make post request for second route using form data from first route without UI-state library? Thx
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
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
To be honest this new way of routing is super complicated.
Do you still have to use Hashrouter to deploy to github pages?
How can i do AnimatePresence in this new routing script?
Thank you so much
18:48 annoying bug
For the new beginners would you recommend to start with this or no ?
What if we had multiple API calls in a component?
Does this work on localhost? data isn't fetching for me and this is hard to debug
pls drop a video on the new react router hooks
Thanks
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?
How to use it together with MUI?
Cool update
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.
The login pop-up that shows up every 10 seconds is really distracting.
Wait what should I learned 🤣 should I learn this new or the other one
Okay they made it more complicated.
Bro forgot to cut the mosquito part😂
Hahahha i showed this to my editor and we fixed it :)
nice one
The video is ok but changing from one IDE to another its a little confusing
Awesome video ++++++++++++++ 🙂
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.
Please do redux saga with redux toolkit to fetch api updating editing creating with axios please 🥺
Great video but these new features just seem like worse, more complex versions of Next 13 features 😅
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
Really miss the old version. It was a lot easier.
hmm
router 6.3 is way easier to setup
Honestly I see it's in most cases a useless update just with complicated syntax
Dont like too much , tanstack Is better
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
better use atomic router instead. react router becomes a trash.
Thanks