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

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 - [e-mail]
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

[@mayer9876]

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.

[@isvene]

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

[@NiteshUpadhayay-tf7ks]

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

[@nothotdog5]

Very useful, thank you!

[@matterhart]

Really good tutorial, keep it up!

[@AbdurrahmanHafez]

Good video. thank you 💐

[@chetanvishwakarma4083]

Very usefull fir me thanks

[@adamseekerfan12]

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

[@AtharvaDeosthale]

Sure 👍

[@adamseekerfan12]

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

[@anuj7286]

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]

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]

@@AtharvaDeosthale Got it, Thank you

[@starlord7526]

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

[@AtharvaDeosthale]

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

[@jaydave791]

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

[@harharmahadev3115]

Bring a brand vedio on trpc, monorepo, turborepo 😅

[@AtharvaDeosthale]

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

[@harharmahadev3115]

👍yes

[@daniel64147]

Good video but lacks Authentication Routes tutorial

[@AtharvaDeosthale]

Would love to cover it in some tutorial

[@nothotdog5]

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]

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

[@AtharvaDeosthale]

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]

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!