Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
Was working on a project on react for first time i needed to know about react router for the project i was building all other tutorials were crazy long with multiple videos and their own project but here i found a great video just teaching me how much i needed for my project thanks a lot i was stressed thinking its a complex thing doubting myself but you explained it in a easy way now I feel more confident Thanks a lot.
I'm glad I found this channel. I've been using Angular for a quite long time and decided to give React a try and this is definitely my go to channel when learning React. Thank you.
I'll be honest here, I haven't really touched React and React Router for quite a while because I was busy with WebGL and R3F and threeJS so I've become rusty, but thanks to your videos I honestly got speed up to date despite documentations existing. This is easier to digest and read compared to their docs imo. Definitely worth a subscribe!
their doc is simply a no no no i was reading their doc but nahh it's was just confusing that's why i came here i actually prefer docs over videos. I only watch videos after finishing doc or when the doc is too confusing the tutorial is really nice God bless him
Instantly subcribe and follow after this video, it's not only concise, straight to the point, but also fast and effective. Only 28 mins long but you are able to teach the whole react router concepts. This is just a gem, can't wait to see this channel quickly grow to 1 mil subs.
If i didn't watch the whole tutorial i wouldn't know that you explained the Outlet component,which is the reason i was looking for a react router tutorial,so i suggest that you tune the chapter titles a bit ! A little tip from a regular viewer appreciate all the free content you are providing for us,we could also use a little tutorial for react layouts with the router because its a bit confusing.
Thanks for the tips! Yes you're right, chapters would help. I never did them so if there are any they must be auto-generated. I'll look into it and fix it!
Wow you are so great at tutoring, while keeping everything as simple as possible you go into detail with every concept and don't leave anything out, thanks:)
Awesome follow through video! One channel to subscribe if you are getting into React and all of its jargon. I had to pause it at times.. but that is 100% normal and I love the speed that the tutorial went with. No need to change anything, just keep making updated content!
Wow, I really liked this tutorial and made my applications more real by generating to a specific user page so that other user can I acces to other users by URL not searching for them in my Chat Applications. I think these cool things can be easily done using only ReactJS ony not with NextJS. Thank you bro!!!
next step after finising this tutarial is by clicking the buy course this is what i am doing now , the way he teaching is so simple and more understadable it is phenomenal
THANK YOU for this video, and I love the way you teach. I sometimes struggle with React Router even though it seems so simple in theory. Finally it just really clicked with me, and I am now subscribed!
Once I watch your tutorial I never have to worry about forgetting the topic. Your explanations are the best. Please could you bring a typescript with react tutorial please!
Sir, I forsee a magnificent future for this channel. Concise, to the point, very articulate, you remind me to another great teacher of initials 'TNN'. You are the kind of creator that makes most bootcamps look like rubish😎. May I dream with a future Angular course? Just let me dream . Keep it up! 🤠
Very helpful video. Keep it up! One of the things I usually struggle with is the implementation of Protected Routes using react-router-dom. It would be really helpful if you could create a tutorial explaining that (specifically in the new v6.2X onwards version).
I really like your videos I follow you from Rwanda 🇷🇼, you explain topics very professional. We would highly appreciate that you can make a full React course that covers all the topics you gave us in the React roadmap!! Thanks and keep it up we like you!!
Hello! Thank you very much for the video! Please tell me what library you use to use css at 8:55. please share your library. Sorry for my possibly strange English. I translated from Russian using a translator.
Great video! I'm glad that RRv6 finally started getting more coverage lately, especially with the addition of Data APIs (loader). I would be curious to hear your opinion on the loader Data API in general, so I'm looking forward to a potential future video :D What do you think about the Data APIs in RRv6 in projects where there's already state management (e.g. RTK)? Do you feel that it gets kind of "confused" in the paradigm (declarative TS with React vs declarative React only) in your opinion or you see it as a viable synergy between RTK Query (or tanstack react query) and RRv6 Data APIs for example? I definitely see a little paradigm confusion + not enough TS support in RRv6's Data APIs, but it can also be a cool synergy for sure with RTK's caching in a project that already uses Redux (or tanstack otherwise). Maybe it needs a little bit more time to fully settle down... A "quick" example of a working project with deferred loader (RRv6 Data API) using RTKQ and TypeScript: // loaders export const itemsLoader = (() => defer({ dataAsync: store.dispatch(api.endpoints.getItems.initiate()).unwrap() })) 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. // router ; 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})}
{isValidError && routeLoaderError.status === 'FETCH_ERROR' && Error: Connection to API failed} {isValidError && routeLoaderError.status === 400 && Error: Bad Request} {isValidError && routeLoaderError.status === 404 && Error: 404 Not found}
); }; export const isFetchQueryError = (error: unknown): error is FetchBaseQueryError => isObject(error) && 'status' in error; // the end All of this could have been done with just the RTKQ's useQuery hook that already has {data, loading, error} and split into the 3 components directly inside without React Router at all, but then with this approach we can throw errors in the loader or in the component and they will bubble up eventually to the RRv6's route's errorElement which is much safer and can be used like old-school error boundaries from OOP React + the Await component also has an errorElement prop that can utilize the same but for example with an optional boolean `fromItemsComponent` prop and render even more personalized errors inside the error boundary vs the more generic fallback when bubbled up to the route's errorElement while using the same component which again reuses the idea of error boundary from OOP React but in a much more powerful way (also as a functional component), so I see a lot of benefit in RRv6 Data API vs simply RTKQ or tanstack react query. I think it's quite cool to be able to use the best out of both worlds - modern State Management hooks (e.g. rtk caching and ability to write automated queries or manual async thunks /e.g. for tokens/) and React Router 6 Data API hooks when state management is not needed in the respective component. Both state management like RTKQ and RRv6 Data Loaders already allow us to ditch useEffects for fetching which is a huge step forward to what we had years ago, but I'm curious to see where the whole RRv6 Data API combined with modern state management redux/rtk/saga/tanstack/zustand will go and if one or the other will become obsolete entirely or many projects will find the more verbose synergy between the two still useful going forward with React 19 and potentially after improving the TS support on RRv6 Data API (since even with custom typesafe enhanced hooks it's not fun, e.g. RRv6's class DeferredData in LoaderData is still not exported and unusable as a type). Great times to be a TS frontend dev for sure. Looking forward to React's ecosystem in 2025 for sure, haven't given up on it yet
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
My man just explained the whole react-router through a story-like continuous manner
I love that you focuse on what you are actually teaching, instead of confusing viewers with too much css and so forth. Big thumbs up!
You should create a course on "How to Teach" because you are one of the greatest teachers I have seen.
I cant believe. A lot of teachers have 1 hour or almost 4h videos a lot of theory what I didn't understand but now I get that finally. Thank you
this is the most clear lesson about react routers. much love
Was working on a project on react for first time i needed to know about react router for the project i was building all other tutorials were crazy long with multiple videos and their own project but here i found a great video just teaching me how much i needed for my project thanks a lot i was stressed thinking its a complex thing doubting myself but you explained it in a easy way now I feel more confident Thanks a lot.
This has to be one of the most high-quality easy-to-understand React Router tutorials on the internet. Good stuff man! 🔥
Easy to understand, to the point and clearly explained. As a back-end person and need to use reactJs, this video is exactly what I need
I'm glad I found this channel. I've been using Angular for a quite long time and decided to give React a try and this is definitely my go to channel when learning React. Thank you.
Glad to hear it!
This was SO helpful, clear and concise. The perfect intro to React Router!
I'll be honest here, I haven't really touched React and React Router for quite a while because I was busy with WebGL and R3F and threeJS so I've become rusty, but thanks to your videos I honestly got speed up to date despite documentations existing. This is easier to digest and read compared to their docs imo. Definitely worth a subscribe!
their doc is simply a no no no i was reading their doc but nahh it's was just confusing that's why i came here i actually prefer docs over videos. I only watch videos after finishing doc or when the doc is too confusing
the tutorial is really nice God bless him
I couldn't properly install React-router until this video. thank you, you saved the day
Instantly subcribe and follow after this video, it's not only concise, straight to the point, but also fast and effective. Only 28 mins long but you are able to teach the whole react router concepts. This is just a gem, can't wait to see this channel quickly grow to 1 mil subs.
Youre a great teacher. Showing why you do things instead of just telling is great
Whenever i want to understand any react topic i just want to watch your video bcs you explain in very simple manner🔥🔥
If i didn't watch the whole tutorial i wouldn't know that you explained the Outlet component,which is the reason i was looking for a react router tutorial,so i suggest that you tune the chapter titles a bit ! A little tip from a regular viewer appreciate all the free content you are providing for us,we could also use a little tutorial for react layouts with the router because its a bit confusing.
Thanks for the tips! Yes you're right, chapters would help. I never did them so if there are any they must be auto-generated. I'll look into it and fix it!
yes! this is what i have been waiting for! thank you so much! another excellent tutorial
The best tutorial I have ever seen on React Router explained in a simple way
This man is a goat, i watch this video several time and every time I get new knowladge
Awesome tutorial man, I hope if I keep learning and watching your videos I can get a job as a react developer.
Of course you will learn it by doing
The best video to learn React router, everything is well explained and very well organized.
He is showing the best practices of the React router !
Love your tutorials brother, very clear and concise.
I appreciate how you explain things so clearly! It really helps me understand complex concepts easily.
Mate, you are gifted at this. Keep on doing what you are doing, you were spot on, on everything. It was well articulated!
The best freaking video out there!!! Keep up the great work
Very clear and concise explanation, well done!
Not only did this help understand how to use react router, but also gave me ideas how to plan out my project a bit.
Wow you are so great at tutoring, while keeping everything as simple as possible you go into detail with every concept and don't leave anything out, thanks:)
great Explanation in flow, each concept was connected to previous concept....We want one more video on React-Router 2
Awesome follow through video! One channel to subscribe if you are getting into React and all of its jargon. I had to pause it at times.. but that is 100% normal and I love the speed that the tutorial went with. No need to change anything, just keep making updated content!
An excellent introduction to React- Browser-Router, so clearly explained.
Thanks, Darius.
{2024-05-30}
Finally! I came across for an hour looking for some clear implementation with react router6 in a proper way! Thank man!
You released this exactly when I needed it.
Incredible explanation, just the video you need! Great job.
Wow, I really liked this tutorial and made my applications more real by generating to a specific user page so that other user can I acces to other users by URL not searching for them in my Chat Applications. I think these cool things can be easily done using only ReactJS ony not with NextJS. Thank you bro!!!
You are an excellent presenter and explainer. I had to watch this video a couple of times to pick up your styles.😁
next step after finising this tutarial is by clicking the buy course this is what i am doing now , the way he teaching is so simple and more understadable it is phenomenal
The course is 100x better and more complete 😁
Your explanations are fantastic! you make the concepts so accessible and easy to follow
you re a shining diamond on React field. thank you for amazing contents.
THANK YOU for this video, and I love the way you teach. I sometimes struggle with React Router even though it seems so simple in theory. Finally it just really clicked with me, and I am now subscribed!
glad it was helpful!
Excellent video! All good explained. Congrats.
EXCELLENT!!!! You're a live-saver! Thank you so much for a concise, efficient and insightful tutorial!
Once I watch your tutorial I never have to worry about forgetting the topic. Your explanations are the best.
Please could you bring a typescript with react tutorial please!
It's coming Friday ☺️
Thanks Cosden for sharing this great tutorial
amazing tutorial! explaned everything in almost 20mins.
wasn't a COMPLETE tutorial but definitely taught me some new stuff. Good video!
I might do a vid like this, thanks for the inspo
if you do include how loaders and defer works. I've been trying to figure that out for weeks. @@devdeclan
Simple, clear, concise and to the point. Brilliant tutorial on v6. 🔥
This is a great and easy to follow introduction to react-router
It was much needed. The best video on React router 6
This saved me hours of work, you know. Thank you Sir.
Sir.... It was really useful content... Literally.............
Your explanation was good... Love you sooo much.............❤️❤️❤️❤️❤️❤️
Oh man, you explained it very well!!
Sir, I forsee a magnificent future for this channel. Concise, to the point, very articulate, you remind me to another great teacher of initials 'TNN'. You are the kind of creator that makes most bootcamps look like rubish😎. May I dream with a future Angular course? Just let me dream . Keep it up! 🤠
I"m glad that I found this video, i'm using react router in a while now but i I don't know that there's a easy way to use it.
probably best channel I have ever watched
Its really useful for me, Thanks man.
You are very good at teaching
Great work with this tutorial!! Greetings from Argentina
Direct on-point tutorial. Just love it❤
What a great job you did, bro! Thanks a lot for such a great video!
This video made my day easy pal, you've got new a subscriber 🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩
Awesome tutorial! Thanks for sharing!
This is the best on React router . Thanks
Best explanation i have found, it really helps you explain every step in detail!
Your explanations are incredible! Thank you!
you should start a react playlist, this was really helpful
This is awesome the one of the best I have seen so far
Thanks man. Its really great for start of learning
Thanks for the cristal clear explanation. Literally save me hours 💪🏽🔥
Much needed tutorial to learn react router v6, thanks!!!
13:52 is there a way to make routes for :profileId to be children of /profiles route? Wouldn't it make more sense?
I love the way you explained it. 🤗🤭
Very helpful video. Keep it up! One of the things I usually struggle with is the implementation of Protected Routes using react-router-dom. It would be really helpful if you could create a tutorial explaining that (specifically in the new v6.2X onwards version).
Hi Cosden, grate video as usual. many thanks, mate
loved it bro! thank you so much!!!
What a explanation sir🙌
Awesome bro. Your are vdo's are very knowledgeableand anyone can understand easily. 🙏
did bro just explained the whole react router in 24 min !
It looks like you're crying in ye thumbnail 😂😂
Lol
stop
React router can make you cry.
@@yukselozgurfact😢
Lol Router mate him cry😂
Great content ! Direct to the point. Thank you
I like the new set up with all dark background
Very concise tutorial. Thanks for your effort in making this.
Thank you very much man it helped a lot - got the complete context ROUTER
most important library, think you to crate tutorial :)
I understood everything you explained. Thank you!
great video, very informative. thank you!
makes a 'complete react router tutorial', also skips several react router topics. Genius
maybe change the channel's name to React Made Simple, what a clear explanation 👏👏
Thanks a lot, i really needed this. So helpful, i really needed this. Suscribed!
I really like your videos I follow you from Rwanda 🇷🇼, you explain topics very professional. We would highly appreciate that you can make a full React course that covers all the topics you gave us in the React roadmap!! Thanks and keep it up we like you!!
the course is currently being worked on!
This is a great way to get started with react router though with the constant update on react i feel youll need to do an update course soon.
good job
Hello! Thank you very much for the video! Please tell me what library you use to use css at 8:55. please share your library. Sorry for my possibly strange English. I translated from Russian using a translator.
wow soo much value , thank you bro
Your videos are awesome, bro.
Thanks for a video! It's clear.
Great video! I'm glad that RRv6 finally started getting more coverage lately, especially with the addition of Data APIs (loader). I would be curious to hear your opinion on the loader Data API in general, so I'm looking forward to a potential future video :D
What do you think about the Data APIs in RRv6 in projects where there's already state management (e.g. RTK)? Do you feel that it gets kind of "confused" in the paradigm (declarative TS with React vs declarative React only) in your opinion or you see it as a viable synergy between RTK Query (or tanstack react query) and RRv6 Data APIs for example?
I definitely see a little paradigm confusion + not enough TS support in RRv6's Data APIs, but it can also be a cool synergy for sure with RTK's caching in a project that already uses Redux (or tanstack otherwise). Maybe it needs a little bit more time to fully settle down...
A "quick" example of a working project with deferred loader (RRv6 Data API) using RTKQ and TypeScript:
// loaders
export const itemsLoader = (() => defer({ dataAsync: store.dispatch(api.endpoints.getItems.initiate()).unwrap() })) 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.
// router
;
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})}
);
};
export const ItemsLoading = () => Loading items...;
export const ItemsErrorBoundary = () => {
const routeLoaderError = useRouteError() as FetchBaseQueryError;
const isValidError = isRouteErrorResponse(routeLoaderError) || isFetchQueryError(routeLoaderError);
return (
{isValidError && routeLoaderError.status === 'FETCH_ERROR' && Error: Connection to API failed}
{isValidError && routeLoaderError.status === 400 && Error: Bad Request}
{isValidError && routeLoaderError.status === 404 && Error: 404 Not found}
);
};
export const isFetchQueryError = (error: unknown): error is FetchBaseQueryError => isObject(error) && 'status' in error;
// the end
All of this could have been done with just the RTKQ's useQuery hook that already has {data, loading, error} and split into the 3 components directly inside without React Router at all, but then with this approach we can throw errors in the loader or in the component and they will bubble up eventually to the RRv6's route's errorElement which is much safer and can be used like old-school error boundaries from OOP React + the Await component also has an errorElement prop that can utilize the same but for example with an optional boolean `fromItemsComponent` prop and render even more personalized errors inside the error boundary vs the more generic fallback when bubbled up to the route's errorElement while using the same component which again reuses the idea of error boundary from OOP React but in a much more powerful way (also as a functional component), so I see a lot of benefit in RRv6 Data API vs simply RTKQ or tanstack react query.
I think it's quite cool to be able to use the best out of both worlds - modern State Management hooks (e.g. rtk caching and ability to write automated queries or manual async thunks /e.g. for tokens/) and React Router 6 Data API hooks when state management is not needed in the respective component. Both state management like RTKQ and RRv6 Data Loaders already allow us to ditch useEffects for fetching which is a huge step forward to what we had years ago, but I'm curious to see where the whole RRv6 Data API combined with modern state management redux/rtk/saga/tanstack/zustand will go and if one or the other will become obsolete entirely or many projects will find the more verbose synergy between the two still useful going forward with React 19 and potentially after improving the TS support on RRv6 Data API (since even with custom typesafe enhanced hooks it's not fun, e.g. RRv6's class DeferredData in LoaderData is still not exported and unusable as a type). Great times to be a TS frontend dev for sure. Looking forward to React's ecosystem in 2025 for sure, haven't given up on it yet
Solid video 👌🏻
Will def recommend
Best guide ever! IThank you so much man
Hello Cosdem, what extension do you use so that the text itself is substituted according to the template? 4:39
did you find the extension used?