No video :(

React Router 6.4 - Getting Started

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

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

50% 1

Get started with React Router 6.4, learn how it differs from 6.x and how you can use its amazing new data-fetching (and submission) features!
Learn all about React.js with my full course: acad.link/reactjs
Join our Academind Community on Discord: academind.com/...
Check out all our other courses: academind.com/...
Code: github.com/aca...
(check out different branches for starting code etc.)
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

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

22 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@abdullahbelkaid1684 Год назад

I was looking for this tutorial because i got lost with the documentation especially they made it using vite , thank you so much

@SrimalPriyanga Год назад

Really impressive tutorial, Obvious on to the point without annoying sounds and talks. Thank you! Love It! Subscribed!

@dylansharp8041 Год назад

This comes from his Javscript course on Udemy which is massive and, imo, really really good.

@transfer1992 Год назад

Thank you! I find myself going back to this video whenever I forget anything about RR's new features. Great video!

@pyrocentury Год назад

How would one leverage the new data features in v6.4+ when integrating with state management like Redux or HTTP client like Axios? Seem like there is a lot of refactoring to do if we want to bring these features in to an existing project. A lot of these libraries require accessing the history outside the react context. I would appreciate a video covering refactoring a project like that to see how you would tackle some of the challenges.

@somerandomchannel382 Год назад

the first thing a library should do is address all loopholes and common usages in their new way. If not, it is not a

@denisotim7640 Год назад

Yeap - I was also wondering about this 😐

@omarkarim9298 Год назад

Angular has had this since v2 with guards

@mkru37 Год назад

Angular had this since version 1 - using angular-ui-router. ;)

@thesunabsolute Год назад

Maybe I'm in the minority here, but I am not a fan of the router taking over all of this additional functionality. I get that they are trying to unify React Router with their Remix Run framework, but IMO a router should just be a router. There are other libraries like SWF and React Query that already make data fetching easy and trivial. I can already see this making the testing story more complex, by now having to mock the data fetching layer ontop of already mocking out the browser router. I just prefer functionality to be kept separate. I am much more excited for the Tanstack Router which is on the way.

@theuniverse685 Год назад

Exactly! And what about if you want to move to another library or framework... how complicated it could be! React Router is becoming a framework than just a a Router library. I mean, all those new features are really great but you can get stuck in the future

@Shyam_Mahanta Год назад

Exactly they have done over engineering and most form submission is pretty useless for me. Since they are the same team who build remixJS & they are doing same thing with react router 6

@mistersunday_ Год назад

Making design decisions based on your testing strategy is a bad habit and isn’t a user centric approach nor adds to DX. Moving your data to routes and you only render your component when the data is ready, leaves you with a way better experience. In fact, tanstack location already had this behavior and you can still combine this with tanstack query (in fact it’s the recommended caching strategy)

@mistersunday_ Год назад

In fact, by decomposing your data layer from your component makes it more testable

@mattc16 Год назад

Ya, it’s not that you’re the minority but rather that you don’t understand it. React Query is a “caching” library. It doesn’t do data fetching. SWR is similar. React Router is offering a way to retrieve your data “before” your page renders, so it doesnt have to rerender on data load. I don’t understand the complaint. You should still use a caching library like React Query with React Router and data loaders.

@orlandocastaneda3169 Год назад

this is super useful, i was a bit stuck with the documentation and this tutorial helped me a lot to understand some things

@eazy2195 Год назад

That must have been the worst documentation I've ever read, it starts you off with installing some unnecessary libraries just so you can code along, it doesn't explain half the things, starts of with the most confusing examples, nightmare.. They should just pin this video instead as an official doc guide

@SahilRajput03 Год назад

Amazing video, Its so lovely to see all this from you. I would can not read docs of this coz I really wanted to see it from people like you.. Love you man!

@gentlecoder5167 Год назад

It's obvious they make all these fancy features just for the sake of Remix. I don't need all of that in my React app. In more or less serious project no one handles data fetching manually, we have react-query, apollo, rtk-query etc for such things.

@skoodath Год назад

Thanks for the tutorial. I was kind of getting lost somewhere between v6.3 and v6.4. This one helped!

@patrickjreid Год назад

Max this is so helpful. a version with redux toolkit would be incredible. I know Remix makes redux largely unnecessary but I am dealing with an ecommerce site that has a usecase for it. Also using it with things like react-query would be a cool tutorial too. Thanks for all your great content!

@dimitaruzunov54 Год назад

The video is as always perfect!!! The problem that bothers me is where is "Separation of concerns" gone? The router needs just to "route"/render the required page, but not messing with data loading (task for service layer) and error handling (again another taks). How such app is going to be scallable and testable...

@krtrvi Год назад

Thanks Amazing tutorial, very much helped to update the react router 5 to 6 without any issues :)

@shotgun600 Год назад

Thank you for the react 6.4 new features guide. It's very helpful.

@abdelhameedhamdy Год назад

This exactly remix style to load data using hooks without touching useEffect

@muresanandrei7565 Год назад

Very shit and limiting stuff not a good practice.

@theuniverse685 Год назад

Really cool! I'm wondering how complicated it could be if you started using React Router 6.4 and then wanted to move to NextJS

@DavidSmith-ef4eh Год назад

Was thinking the same. The features seem cool, but would make it harder to add htem to nextjs. Right now the pages in our cra app (spa style) can be easily importet in the nextjs SSG app, and they just work, since the component knows how to fetch the data itself. Wouldn't really work with this approach though, or you'd have to create a wrapper component and pass in the loader and teh PageComponent, and handle the data fetching there... Too much work if you ask me 🤣

@ktoscos4546 7 месяцев назад

Very great tutorial , i have learnt a lot. Certainly I will check others materials :)

@jamesdenmark1396 Год назад

It's great tutorial, and straight to the point! The only missing thing he didn't mention in this video is how to get the types from the deferred loader! I think react-router. didn't create type utils for that?

@Abken. 5 месяцев назад

10 months late response... But you can use react-router-typesafe for type inference based on the loader. Example: // loaders export const itemsLoader = (() => defer({ dataAsync: fetchItems() })) satisfies LoaderFunction; // using npm i react-router-typesafe for type inferrence for the useLoaderData, error hooks and RRv6 Await component in React 18 Suspense, etc. // then just use it in the browser router like loader: itemsLoader export const Items = () => { const { dataAsync: itemsLoaderAsync } = useLoaderData(); // Note: it will be strongly typed based on the loader automatically return ( {/* Note: items will be strongly typed automatically to the type coming from the query in the loader, e.g. Array */} {(items) => items.map((item) => {item.description})} ); }; Important note: if the loader is async, it will still block the component from mounting and it will not be properly deferred. Always return the whole promise in the defer, so it can be properly awaited with React Router 6 Await inside a React 18 Suspense

@TamirGilany Год назад

Excellent and useful as usual!

@ed-jamal Год назад

Thank you for this video Could you tak a look at tankstack/table Update from v7 to v8

@IvanRandomDude Год назад

Versioning makes no sense. You cannot have so many breaking changes in minor version. This should have been react router 7.Not professional at all. What's next, breaking changes in patches?

@ktoscos4546 7 месяцев назад

Very helpful video , I am wonderin if component need wait for fetch data before render , would it make effect of page suspension?

@mertylmaz6288 Год назад

Hey Max. Thanks for the video. You really made me understand react 2 years ago. What do you think about react-query? I use it a lot and it's less complex and easier to use than the features of 6.4

@alejandrovillarroel7855 Год назад

I also use react query for everything, no more context or redux, its just easier with react (tanstack) query

@Aldabil Год назад

@@alejandrovillarroel7855 Redux/Context still has it use case that does not clash with react-query, they have total different objective so they actually don't "substitute" each other. Nonetheless, Redux has introduced RTK-query which actually can be compared/substituted with react-query.

@omkarsalapurkar2981 Год назад

This is exactly what remix does

@jerviemarquez5192 Год назад

thank you so much Max 👍😁

@SonuSindhu Год назад

That's great addition 👍

@isholapinheiro Год назад

Thank you this was incredibly helpful

@deepakbhatt7494 Год назад

Awesome one I have one question how we can use with latest react-router-dom.

@zubidev Год назад

Please add this topic to the react course in udemy.

@academind Год назад

We just sent an announcement regarding that + added a lecture.

@jz_s89zed19 Год назад

Thanks max!

@dluca182 Год назад

man, the video was amazing! The official doc...meh.. i'm a total beginner so I didn't have any previous knowledge or base, and most of questions and online tutorials have almost nothing about this version, so, while learning the first things about react router, I have to learn how was it before and try to convert it on the fly. Plus I started using fetching to a backend with JWT and is all going sideways having to use tokens and not being able to use Hooks inside loaders or actions...i'm so lost Watching your video gave me a bit of hope, i'll have to change some routes I did because I think I mixed up some structure between different versions. Hope to find somethign useful with the defer and await functions

@AfonsoFilipeJr Год назад

This video is perfect, thanks!! qq, why do we need to specify the main navigation in the error page if the error is also nested in the outlet?

@benyamineslami573 Год назад

great tutorial, thanks

@mistersunday_ Год назад

Lessons learned from Remix 💿

@likewd9811 Год назад

Great I always See your troturial

@amitsinghrawat4760 Год назад

I think already have these features

@micheledellaquila7671 Год назад

I found a problem with this new version: Uploading file. Action don't work with this type of form. Can anyone help me?

@mj2068 4 месяца назад

damn. you are good at what you do. i wish i can be you.

@Wakkyguy Год назад

Hi Max, So if I don't use "defer" then React Router will always wait for the loader's promise to settle before loading the route page/component? Is there a way to get access to the the loading state when not using defer function?

@EmiliaKaida Год назад

Has the API & functionalities changed much from v 6.0 to the latest (6.8) ? Are there any breaking changes? I want to know because I learned about the features of v6 from a course that taught in v 6.0 beta, not sure if there'll be entirely new things now.

@mustafamufeed1666 2 месяца назад

in what section you added this lecture in the react course in udemy?

@rafiqulislamtusher8605 Год назад

Thanks for this video. What is your opinion if I use any react library to handle Form data, error, etc instead of the new Form feature of react-router-6.4

@user-vm3vf8sq1z Год назад

Helpline📲📥⬆️ Questions can come in⬆️

@abdallahazouz5948 Год назад

great discussion ,but I need to know how to make a condition inside createBrowserRouter , example :if I have a user logged in => so I can not go to login page

@jeffkinley3698 Год назад

Thanks! Great tutorial. Do you happen to have a demo app somewhere with this running?

@thomasnarkiss6319 11 месяцев назад

Were those 44 minutes video of React Router which don't include any* Link and/or NavLink components, or I just missed it..? (*Unless those components are no longer part of the concept..?)

@TakeOnMe5 Год назад

To be honest, I don't like the new data fetching stuff introduced in 6.4. Managing request/response logic at the routing level? I don't know what they smoked but React Router went beyond what its purpose originally was, namely client side routing only and just that. Luckily they didn't touch the regular mechanisms so one can still write clean client side routing code.

@alexanderbaltsevich9270 Год назад

is it strange only for me when router started fetching data and manage forms?

@solaaar3 Год назад

how do you implement transition animation between routes in this new api, i'm having hard time figuring out how to do it.

@johnniefujita Год назад

Max I'm building the admin for an app and since it is for internal use. I'm experimenting on all these new approaches that I was eager to implement since I first heard about remix. They really hit the bullseye where things used to get really repetitive and unpleasant to work with react. My only doubt is what is the best state management solution for me to go for this new admin. I have stayed loyal to redux, the customer faced native app that I work for uses redux toolkit. What are your thoughts? should I experiment with something more focused just in central state management since async states are no longer a problem. What library do you think works better with this new router

@johnniefujita Год назад

Maybe sticking to RTK but calling it postmortem synchronously to update the state is a reasonable call?

@wadf29 Год назад

How about starting by setting the routes?

@anton9410 Год назад

Would you please advise on how to implement the useRouteError() but in Typescript. It is defined as unknown and I have no idea how to define it in Typescript

@akshaygadekar3089 Год назад

this is like total rewrite of react router dom

@srikanthchebrolu3333 Год назад

is it possible to use polling with the new react router 6.4.2

@danni1265 Год назад

Hello, can you please tell me how to create protected routes with v6.4? I have tried everything which i could find in youtube but nothing worked properly. So I would like to build a login system where only the login and the sign up pages are public. After I login, it redirects me to the home page and doesnt allow me to go back to the login page. Thanks...

@johnniefujita Год назад

but was not it the proper behavior? keep register and login pages only when you are logged out? I'm starting to build using 6.4 now, when I get to that I may help you if I find it need some special dealing to solve. Have you figure it out for yourself already?

@kawsarahmed7045 Год назад

impressive

@enisjasarovic691 Год назад

Does anyone knows a good tutorial that implements some state management with React Router V6.4 and above... I can't figure out the best way to implement state management and which one to use

@sumonbarai178 Год назад

really helpfull

@victorrochin2616 Год назад

What if Im trying to go to a specific section of a page?

@khandokershahidujjamanshah8444 Год назад

in this tutorial, if I need a post image how to get a post image from fromData

@balram1604 Год назад

is there a way to pass params to mapStateToProps redux? ownProps not working with version 6

@stavroskefaleas6320 Год назад

I am trying to convert an existing application to a react-router-dom v6.4 app and I am stuck. I have made the conversion of around the 80% of the app but I don't know where to put the Context API.

@kumailn7662 Год назад

What about if error occurs in rendering?

@ahmedbashir2307 Год назад

Hey Max, any plan to launch new Laravel course?

@downfall6223 Год назад

React router is so bulky, fat and nasty. I need to implement a very simple functionality, but must go through this absolute behemoth of monolithic piece of crap. So many changes throughout the versions and such poor docs. Getting some random rerenders and component flickering and all that "good" stuff. I wish I just used next js for routing instead

@kayodedanprecious2053 Год назад

Just so annoying! The changes each version makes you feel like you don't know what you're doing. Reading their docs to find help is just futile!

@andriisukhariev Год назад

Nice and explenative! But something is not working on version 6.4.2 - when i follow your instruction for "blog" and nested ":id" routes - blog shows up normally, but nested element is just blank ... could you advise on that? thanks

@andriisukhariev Год назад

Actually it works when i visit it clicking "Link" from react router, but when i visit page directly - it's blank

@vanyamakhlinets7720 Год назад

Don't understand this release. Community moving to hook declarative request strategy (react-query), new features are not compatible with such approach. Form handling looks awful too 🤨

@blessingz Год назад

A complete un-learning of most the things that worked and kept the world round.

@devdive24 Год назад

Can anyone tell me how can I declare an index route for a parent route in v6.4 while using this format? const router = createBrowserRouter([ { path: '/', element: , }, { path: '/login', element: , }, { path: '/dashboard', element: , children: [ { path: 'order', element: , }, { path: 'service-list', element: , }, { path: 'review', element: , }, ], }, ]);

@donerlando9949 Год назад

If I understand your question correctly, it can be done like this: { index: true, component: } or: { path: '', component: }

@carefree_ladka Год назад

😞 why God. They're gonna run out of hooks names soon

@kinstar Год назад

haha yeah

@chikwadonworie4110 5 месяцев назад

🤣

@mohamedyoussef8835 Год назад

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

@killDJuice Год назад

kinda feels like angular tbh

@hakuna_matata_hakuna Год назад

this just killed react-location , preloading with relay will be possible with react-router

@DavidSmith-ef4eh Год назад

Might be annoying to the users. Imagine clicking a link and nothing happens (since some data might take 400ms to load). I think it's better if the navigation happens right away, but to an empty page with a loader, instead of blocking the navigation for 400ms. I guess I am sticking with v5 forever then...

@sihoonkim1502 Год назад

I think this UX is a ton better cuz, when u transition from page 1 to page 2, with previous data fetching, it would navigate to page 2 instantly with no data, just spinners or skeleton UI. Now you can show the spinner with page 1, while data for page 2 is being fetched. So when the data arrives it navigates to populated page! So there will always be some meaningful data on the page during transition. In my opinion this does not only improve DX but also UX!

@DavidSmith-ef4eh Год назад

@@sihoonkim1502 yes, but ties you in with react router. Suddenly it would be a pain to use that component in nextjs.

@sihoonkim1502 Год назад

@@DavidSmith-ef4eh Yea, I hate opinionated libraries and frameworks. I was worried about this as well when I first heard of this data fetching and mutation being included in the router. But the thing is, RR is not forcing u to use loaders and actions. They just give u "one more option" and the way they handle data fetching is really useful and I dont think u can do this with other data fetching tools or Next.js. Also with nested routes u can have parallel loaders being executed. All of this feels very "natural" that data fetching and mutation should be a part of the router. And with Next.js, I dont think it would make stuff necessarily a ton more difficult. The loader part would be similar with getServerSideProps. Also, they have Remix which is a SSR framework that uses the same RR 6.4 APIs. I would give that a try. I am trying it out recently, and really like it so far.