React Router 6.4 - Getting Started
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- 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!
Oh my goodness, you are the best!!!!!! I am trying to teach myself this for a class, and other tutorials were not cutting it. I got discouraged when I saw that you’re teaching this top-down, which I usually don’t like as too much code confuses me. But holy, you took your time and explained every detail very meticulously!
I was looking for this tutorial because i got lost with the documentation especially they made it using vite , thank you so much
Really impressive tutorial, Obvious on to the point without annoying sounds and talks. Thank you! Love It! Subscribed!
This comes from his Javscript course on Udemy which is massive and, imo, really really good.
Thanks for the video! Much easier to follow than just doing doc diving on the router dom website.
Thank you!
I find myself going back to this video whenever I forget anything about RR's new features. Great video!
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.
the first thing a library should do is address all loopholes and common usages in their new way. If not, it is not a
Yeap - I was also wondering about this 😐
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...
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!
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!
Very helpful video , I am wonderin if component need wait for fetch data before render , would it make effect of page suspension?
this is super useful, i was a bit stuck with the documentation and this tutorial helped me a lot to understand some things
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
Thanks for the tutorial. I was kind of getting lost somewhere between v6.3 and v6.4. This one helped!
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
I also use react query for everything, no more context or redux, its just easier with react (tanstack) query
@@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.
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?
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
Thanks Amazing tutorial, very much helped to update the react router 5 to 6 without any issues :)
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
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 🤣
Thank you for the react 6.4 new features guide. It's very helpful.
Awesome one I have one question how we can use with latest react-router-dom.
Angular has had this since v2 with guards
Angular had this since version 1 - using angular-ui-router. ;)
Thank you for this video
Could you tak a look at tankstack/table
Update from v7 to v8
Very great tutorial , i have learnt a lot. Certainly I will check others materials :)
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?
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.
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.
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
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
Helpline📲📥⬆️
Questions can come in⬆️
Thanks! Great tutorial. Do you happen to have a demo app somewhere with this running?
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.
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
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
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)
In fact, by decomposing your data layer from your component makes it more testable
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.
in what section you added this lecture in the react course in udemy?
Excellent and useful as usual!
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..?)
Thank you this was incredibly helpful
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?
This exactly remix style to load data using hooks without touching useEffect
Very shit and limiting stuff not a good practice.
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
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
Maybe sticking to RTK but calling it postmortem synchronously to update the state is a reasonable call?
how do you implement transition animation between routes in this new api, i'm having hard time figuring out how to do it.
thank you so much Max 👍😁
That's great addition 👍
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
great tutorial, thanks
This is exactly what remix does
Great I always See your troturial
is it possible to use polling with the new react router 6.4.2
Please add this topic to the react course in udemy.
We just sent an announcement regarding that + added a lecture.
Thanks max!
I think already have these features
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.
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
Actually it works when i visit it clicking "Link" from react router, but when i visit page directly - it's blank
Hey Max, any plan to launch new Laravel course?
damn. you are good at what you do. i wish i can be you.
Lessons learned from Remix 💿
How about starting by setting the routes?
Hey Max! What's your thought on @remix_run? Any plan to make a complete course?
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.
really helpfull
I found a problem with this new version: Uploading file. Action don't work with this type of form. Can anyone help me?
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...
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?
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
is there a way to pass params to mapStateToProps redux? ownProps not working with version 6
impressive
is it strange only for me when router started fetching data and manage forms?
Awesome video +++++++++++++ 🙂
What if Im trying to go to a specific section of a page?
in this tutorial, if I need a post image how to get a post image from fromData
What about if error occurs in rendering?
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 🤨
A complete un-learning of most the things that worked and kept the world round.
👍👍🥰🥰
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?
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...
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!
@@sihoonkim1502 yes, but ties you in with react router. Suddenly it would be a pain to use that component in nextjs.
@@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.
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: ,
},
],
},
]);
If I understand your question correctly, it can be done like this:
{
index: true,
component:
}
or:
{
path: '',
component:
}
😞 why God. They're gonna run out of hooks names soon
haha yeah
🤣
this just killed react-location , preloading with relay will be possible with react-router
this is like total rewrite of react router dom
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
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!
React router just killed react query?
Making a React tutorial without TypeScript in 2022 is beyond me... Nobody writes a code in Javascript these days :/
Doing it in JS makes the code simpler for learning purposes. If you know TS then it's not hard to do that extra step yourself.
The video quality is not good. All blurry
kinda feels like angular tbh