What Is TanStack Router And Why I Love It

I love type safety, but have always been disappointed in the type safety of modern routers. That is until now. Tanstack Router is incredible at giving you a fully type safe router which makes coding so much nicer and easier. In this video I talk about what Tanstack Router is and how you can get started with it.

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:30 - Overview
03:00 - Simple Example
05:39 - More Complex Example

#TanstackRouter #WDS #ReactJS

[Zagoorland]

I'm really glad that you're focusing more on typescript related content!

[KevinVandyTech]

More TanStack videos!
I'm a maintainer for TanStack Table if you ever make a video about that, feel free to reach out.

[tannerlinsley]

A lot of the "verbosity" is felt due to meta-frameworks having file-based routing, which TSR also has ;) except it's not a meta-framework. It's just a generation step you can run/watch while developing or in CI that gives you same auto-codesplit file-based routing experience we're all used to. There are multiple examples for it already in the repo :)

[JesseSlomowitz]

Great video! If you're mentioning TanStack, hopefully you can do a video about React-Query. That has been a game-changer for API handling and caching. Also, but not related, Preact Signals for React since that also seems like a big next step for React state handling.

[malletdevoted]

Thank you so much for making this video! This is exactly what I was looking for.

[ShaharHarshuv]

I was very skeptical about full type support for routing but the way they did it is actually genius! Can't believe I haven't thought of it

However - I can't help but wonder if maybe this is not scalable enough, as it forces you to have one place with ALL of your route definitions and a singular interface declaration with the type. For big apps you would typically want to have different part of the app define their own route, which might be managed by different teams and even in different repositories.

[alexgv]

Hi Kyle... as always your video content is great. This message is just to let you know that this particular video has the audio volume lower than usual. Please, the aim here is not to be critical... just to bring the issue to your attention. Thank you for always bringing good content and putting so much effort into it.

[bendevweb]

Thank you for introducing us to this incredible and super practical tool. 👍
Personally, it makes me want to use it in my next React TypeScript project!

[bogdanfilimon]

That more “complex” example is actually what Remix and React router v6 do. You have loader and action (for submitting a form).

[SeanCassiere]

Been on beta38 for about a week now, and I've loved the useSearch hook to access Objects from the query-params and maintaining referential equality.

I can't wait to go all in once Tanner and team are done with documentation. Code-splitting is something I'm still waiting on examples for.

[techjourney]

Hey bro, Love your content by the way. I'm graduating with a Cs Degree and would appreciate great sources for tech news if young wouldn't mind sharing. Like which website/ news sites would you recommend for staying up to date / staying informed with new innovative technologies. Would greatly appreciate it!! Keep up the great work bro, you've helped me a bunch!!!

[StephanHoyer]

A simple object containing all the routes would also do the trick and is IMHO way simpler than those shenanigans.

[thevividversatilechannel]

I have refactorings


[1] You could use implicit return from arrow function. Implicitly returning will also reduce nesting:

() => (
<>...</>
)
instead of
() => {
return (
<>...</>
)
}

But, with braces and explicit return, you can put code before the return statement if you need to.


[2] As you are not using `this` in the function body, you can use shorthand syntax for defining an object method:

component() {
return ...
}
instead of
component: () => {
return ...
}


@6:28

async loader() {...}
instead of
loader: async () => {...}


Thank you very much

[zachsanchez]

Tanner is a blessing man, I also heavily rely on the react-query library.

[harmez]

everyday a new tool . PLEASE leave me alone with my already known knowledge...

[milesparker]

TanStack also made React Query, which is a really good cache system. Glad to see they're working on a cool routing system now.

The coolest part for me is the support for search params. Definitely an aspect I'v struggled with in the past with React.

[BarisPalabiyik]

Lol, what's up with all that hate in the comments. I am invested in Next routing atm but this seems actually great, having typesafety on the routes is something I would love to have, the search params stuff was also quite interesting.

[cowabunga]

Please more typescript related content thanks!

[senseicodes]

Wow all this for just routing when all I want to do is to simply use the "a" tag in html to navigate pages. No wonder Sveltekit is getting a lot of love. Great video Kyle! I love watching you always and learning a lot. Keep up the good work still 👊🏿

[cirkuscederstrom]

I requested type safe routes over at the react router repo but the remix team turned it down within an hour stating it’s impossible