React Router - Complete Tutorial

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we will learn about React Router. React Router is a very popular navigation library in React. It allows for a very powerful and robust navigation solution in your React applications. It handle all of the navigation client side, which means that you do not need to reload the browser on every page visit. Everything all happens on the client side. Get ready, because you are going to learn a lot in this video!

[@user-ob9qm4br2j]

My man just explained the whole react-router through a story-like continuous manner

[@avrakadavra1552]

Petition to change the title of the video with React Router 6 in a nutshell. Anyway, thank you for this tutorial

[@tdematos]

This has to be one of the most high-quality easy-to-understand React Router tutorials on the internet. Good stuff man! 🔥

[@damiansimonak7955]

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

[@lifeofaimie]

This was SO helpful, clear and concise. The perfect intro to React Router!

[@VaibhavPrasad]

Simple, clear, concise and to the point. Brilliant tutorial on v6. 🔥

[@Hasaralc]

this is the most clear lesson about react routers. much love

[@thecanadian6145]

Youre a great teacher. Showing why you do things instead of just telling is great

[@julienheng3880]

yes! this is what i have been waiting for! thank you so much! another excellent tutorial

[@seagull2345]

Love your tutorials brother, very clear and concise.

[@g.ryanpeterson9686]

You released this exactly when I needed it.

[@chamithperera475]

Mate, you are gifted at this. Keep on doing what you are doing, you were spot on, on everything. It was well articulated!

[@alvinyanson]

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.

[@cosdensolutions]

Glad to hear it!

[@naziruadam3950]

You are an excellent presenter and explainer. I had to watch this video a couple of times to pick up your styles.😁

[@checker4174]

Your explanations are fantastic! you make the concepts so accessible and easy to follow

[@brajagopal4725]

Direct on-point tutorial. Just love it❤

[@iranna9065]

It was much needed. The best video on React router 6

[@user-og5rw1nk7d]

Whenever i want to understand any react topic i just want to watch your video bcs you explain in very simple manner🔥🔥

[@ichiroutakashima4503]

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!

[@afokerealityigho9003]

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

[@ujjwal4441]

amazing tutorial! explaned everything in almost 20mins.

[@shubhamtarade]

Much needed tutorial to learn react router v6, thanks!!!

[@alanford9260]

What a great job you did, bro! Thanks a lot for such a great video!

you re a shining diamond on React field. thank you for amazing contents.

[@rahulpatil3942]

This is a great and easy to follow introduction to react-router

[@richiezo]

I love the way you explained it. 🤗🤭

[@ajlebeau]

Your explanations are incredible! Thank you!

[@jakobjaworski9526]

This saved me hours of work, you know. Thank you Sir.

[@vikashgupta3305]

great Explanation in flow, each concept was connected to previous concept....We want one more video on React-Router 2

[@nikawuladze953]

probably best channel I have ever watched

[@runelillevang1011]

Best explanation i have found, it really helps you explain every step in detail!

[@ahmedfernandez4695]

Thanks for the cristal clear explanation. Literally save me hours 💪🏽🔥

[@mercyiskey9009]

I understood everything you explained. Thank you!

[@ernestadonu9110]

This is awesome the one of the best I have seen so far

[@rivvychica]

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!

[@cosdensolutions]

glad it was helpful!

[@alminyana0]

Hi Cosden, grate video as usual. many thanks, mate

[@johnacsyen]

Very concise tutorial. Thanks for your effort in making this.

[@angelogaspar364]

Great content ! Direct to the point. Thank you

[@manojpatra4458]

Thanks. You explained it nicely.

[@rjwhite4424]

wasn't a COMPLETE tutorial but definitely taught me some new stuff. Good video!

[@devdeclan]

I might do a vid like this, thanks for the inspo

[@rjwhite4424]

if you do include how loaders and defer works. I've been trying to figure that out for weeks. @@devdeclan

[@moschg78]

Great tutorial, thank you man!

[@tomas6909]

Great work with this tutorial!! Greetings from Argentina

[@stroutco2070]

Solid video 👌🏻 Will def recommend

[@becharaalhosri6471]

Awesome tutorial man, I hope if I keep learning and watching your videos I can get a job as a react developer.

[@mDHARYL]

Of course you will learn it by doing

[@thomasimbriago8257]

Extremly helpful video, thanks!

[@DominatesYT]

Amazing amazing video and explanation! Thank you!

[@hitendrapatil9991]

Awesome bro. Your are vdo's are very knowledgeableand anyone can understand easily. 🙏

[@RabeaerisFracto]

Thanks a lot, i really needed this. So helpful, i really needed this. Suscribed!

[@ChristopherNolanski]

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! 🤠

[@user-wr5bs5yg4i]

Great and simple explanation!

[@Sofien_Steve]

maybe change the channel's name to React Made Simple, what a clear explanation 👏👏

[@youcancallmejoker340]

Cheers. Amazing video!

[@LGelashvili]

Your videos are awesome, bro.

[@user-zt4cm5zx5k]

very useful and easy to perceive, ty

[@chowiee5688]

Thanks Man, I learn a lot from you nice one😎😎

[@annyotamo]

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!

[@cosdensolutions]

It's coming Friday ☺️

[@Nashoflow95]

Que buen video bro! te ganaste un suscriptor

[@nextleveltech267]

Sir.... It was really useful content... Literally............. Your explanation was good... Love you sooo much.............❤️❤️❤️❤️❤️❤️

[@Abken.]

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

[@artistnahiart3728]

Just want to say thanks. exact exact exact which I wanted

[@omidgreat]

Thank you so much brother ❤😊 please more videos like this 😅

[@suprabhatkumar5478]

Thanks for this great video. Please consider adding Forms, loaders, actions as well.

[@ayushyapatel8645]

Hey bro just to let you know your knowledge game me more understanding than other courses i took . just so grateful . Also wondering if you can make a video about api integration in nex tJs

[@lamarkkhalifa3970]

dude you are such a life saver !!!!!!!!

[@uvins]

Very thank you, this is the only working way!!!

[@republicoftutorials6068]

Great explanation thank you

[@mohamedsalimbensalem6118]

Ive watched all your videos and i learned alot thanks to you I suggest if u make a video about virtualization using package and then doing it from scratch

[@shwetamane8774]

Great tutorial 👏

[@alem182]

Great video!! thanks!

[@n241195r]

Great vid!

[@abhitrana3425]

Very good tutorial!!!

[@USPSLaura]

great teacher 🧑‍🏫

[@okpechisblog2385]

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

[@zamanEhsani]

nice and easy explanation.

[@Host-Tach]

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.

[@INetreba]

good clear lesson

[@sylvestercampbell7892]

Great fan of you👍

[@muhammadmursalin8915]

Great work.🎂🎂😀

[@muhammadshefain6073]

Awesome tutorials

[@user-jz8wx9op8j]

I love this guy

[@lukalastname8199]

im too lazy to understand from docs, it was helpful and fast haha

[@tofidndndkkdkwkqe7017]

Thx bro!!

[@victorm3807]

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!!

[@cosdensolutions]

the course is currently being worked on!

[@no-distrx]

Thank you)

[@gagikyeranosyan]

Thanks!

[@ahmadnku8336]

Exactly, On time

[@joyustcian222]

perfect one

[@dimitmoto1716]

Thanks a lot! Btw I have watched your redux tutorial and for async state you use async thunks. In real life do you use async thunks or redux toolkit query or something else? What do you prefer?

[@cosdensolutions]

I usually use React Query nowadays the most! It does a lot of what I want automatically in terms of async functions. For other state. I'll use zustand or redux, depending on the project

[@dimitmoto1716]

@@cosdensolutions Thanks for the reply. I'd ask you RTK query tutorial, but if it's not the best solution, I don't know if it will make sense.

[@cosdensolutions]

it's a great solution, I just don't always need redux so I use RQ instead. All solutions are great and it ultimately depends on the project

[@dimitmoto1716]

@@cosdensolutions thank you!

[@stevenwoolston8620]

Any chance we can see the package.json so we know the npm package versions you’re using?

[@proostdaantv]

Great tutorial! However, i'm running into an issue; I have a Navbar and Footer component that's outside of the createBrowserRouter array, which breaks the application. I can't imagine I need to add the navbar and footer with every page/component, so how do I go about it? Thank you!

[@colorblack8305]

keep making *more stuff* man, yeah docs have more in-depth explanations but it's simply not viable for one to go through every doc just to use/learn some features, there's just too many things to learn & cover. More content would be helpful as it's like outsourcing the learning. And thanks your contents have been very helpful.

[@LieseLu]

Thank you a million times! Your video is so clear that I could just use react-router-dom in my project too! But I have problem of setting default page "/city" rather than "/", I checked severl methods like add index: true, use Navigate to redirect, , and set the basename as the documention said, but none of them worked, I used Browser router at last...

[@Mohammed-rx6ok]

Magnificent

[@GiantSquid13]

Hi, Thanks for taking time to make such awesome tutorials. I always enjoy watching and learning from them. I am totally new to react router dom and using the was amazing as I have a static headers and footers and has helped me manage states efficiently. I have a problem though. How do I separate the auth pages/screens from the other screens using this method. Thanks for helping

[@RaslenKorbosli]

i dont know why i feel scared when i use react router , but after this video im not scared anymore hahahah

[@Nika-ql4tm]

Thanks you this is very helpful! How do i make each profile different like i want each profile to have its own component like profile50.jsx or something like that.

[@youssefmagdy7150]

excellent tutorial thanks a lot if you make a more advanced tutorial it would be very appreciated 🙏

[@megafirestar5030]

Hello cosden can you do a video for intercepting the back and forward buttons of the browser in react? Please I have been searching for it but couldnt find anything usefull cause all the solutions use useHistory which deprecated

[@ndetokiio3563]

thank you

[@godofwar8262]

Does we have to put error page in each object

[@michaelrooze278]

what version is this? What is the latest version of react-router and react-router-dom?