TanStack Router is my favourite React Router -- TanStack Router Tutorial

Рет қаралды 5,098

Күн бұрын

Hello guys! In this video, we will look at TanStack Router -- a routing solution for React apps. I'm pretty sure when in your React learning curve you must have heard about react-router-dom and the way it allows you to create routes within your React application. TanStack router allows you to do that PLUS a lot more. In this video, we take a look at TanStack router documentation, and use some features such as file-based routing (such as found in Next.js), search params, loaders, etc.
If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝
Links
Tanstack router documentation -- tanstack.com/router/latest
My video on React Query -- • Using React Query with...
GitHub repository associated with this video -- github.com/atharva-youtube/ta...
Timestamps
0:00 - Introduction
0:34 - Tanstack router documentation
2:36 - Creating a vite app and installing dependencies
4:23 - Configuring tanstack router
12:22 - Creating a new route
14:14 - Creating layouts
19:50 - Creating paths with params
22:09 - Search params on routes
29:28 - Loaders
31:15 - Using loaders with react query
38:35 - Conclusion
Any suggestions? Leave in the comments below!
My links
E-mail - hey@atharva.codes
Blog - blog.atharva.codes
Latest Links - links.atharva.codes
Twitter - / athudeosthale
LinkedIn - / atharvadeosthale
#programming #programmer #javascript #nodejs #npm #reactjs #react #router #reactrouter #routing #navigation #url #params #search

Пікірлер: 30

@isvene 3 ай бұрын

Straightforward, informative, and clear. This is very helpful. Thank you!

@NiteshUpadhayay-tf7ks 2 ай бұрын

i searched a lot the way of layout finally i got it 💕

@mayer9876 3 ай бұрын

Great video, thank you for the clear explanation and demonstration of the features, specifically the loader part where you also included tanstack query as the external data library.

@nothotdog5 3 ай бұрын

Very useful, thank you!

@matterhart 2 ай бұрын

Really good tutorial, keep it up!

@AbdurrahmanHafez 3 ай бұрын

Good video. thank you 💐

@chetanvishwakarma4083 2 ай бұрын

Very usefull fir me thanks

@adamseekerfan12 4 ай бұрын

nice bro we want more on this tanstack router from beginer to advanced very nice keep it up

@AtharvaDeosthale 4 ай бұрын

Sure 👍

@adamseekerfan12 4 ай бұрын

@@AtharvaDeosthale when you will upload new vidio on tanstack router

@anuj7286 4 ай бұрын

Thanks, bro you helped me a lot. I was stuck at file configuration. I have a question does React Route work without React typescript?

@AtharvaDeosthale 4 ай бұрын

TanStack router SHOULD work with JavaScript I think. I have only tried with TypeScript. But yeah if you use JS, you wont get the type-safety features.

@anuj7286 4 ай бұрын

@@AtharvaDeosthale Got it, Thank you

@harharmahadev3115 4 ай бұрын

Bring a brand vedio on trpc, monorepo, turborepo 😅

@AtharvaDeosthale 4 ай бұрын

I have individual videos on them. Do you want me to create a project using all of them together?

@harharmahadev3115 4 ай бұрын

👍yes

@daniel64147 4 ай бұрын

Good video but lacks Authentication Routes tutorial

@AtharvaDeosthale 4 ай бұрын

Would love to cover it in some tutorial

@starlord7526 4 ай бұрын

why use this instead of NextJS routing behavior(page router)?

@AtharvaDeosthale 4 ай бұрын

Some people simply don't prefer Next.js for their own reasons. TanStack router can help you bring file based routing to Vite

@jaydave791 2 ай бұрын

It gives very robust state management in url, which is how nextjs prefers it but does not have that in the router itself

@nothotdog5 3 ай бұрын

I think there is a redundancy with your QueryClient - since you are wrapping everything at the top level, I don't think you also need to configure a context. Maybe I am wrong?

@nothotdog5 3 ай бұрын

Nvm, I see that the context is needed specifically for the router, not for TS Query

@AtharvaDeosthale 3 ай бұрын

The advantage I could think of is you could pull in the queryClient in other files and do stuff with it. The docs do suggest to use the queryClient. Not really sure if entire thing would work without one though. I’d def not remove it tbh. But yes, interesting and would love to dig deeper about this

@danielguldbergaaes6432 Ай бұрын

@@AtharvaDeosthale I could be wrong, but is this where useQueryClient comes in handy? It will simply return the current queryClient instead of instantiate a new one for each route.

@AtharvaDeosthale Ай бұрын

The problem there would be that hooks cannot be used on server components

@danielguldbergaaes6432 Ай бұрын

@@AtharvaDeosthale You are absolutely right, and the way you did it is NOT creating a new instance of the query client each time. I was too fast ;)

@thilinalakshan4517 2 ай бұрын

Great work! I just realize that instead of using `_layout.tsx`, we can use `_layout/route.tsx` as well. I prefer that because it feels much cleaner. 👾 Thank you!