I Waited 3 Years For This Router. It STILL Blew My Mind. 

Tanner is insane. I've used the alpha a lot of this project and found 3 bugs, all have been fixed within 12 hours from me reporting it :)

This Tanner guy is literally Godsent for devs like me. 😂 Thank you, Tanner for building things that makes web development much much more interesting and intuitive.

This looks really cool. Theo always seems to be the first to introduce stuff like this to me, then Jack Herrington does a tutorial - "How cool is that!?"

TanStack Router 1.0 is so good that it feels like a mature 6.0. He really took his time to get it right before shipping it.

Vue and Nuxt has had a typed router for a while now.

Bro, (please don't kill me) but I feel like we're just going back and forth between folder spaghetti and code spaghetti. For example, I really don't understand how having a different debugging tool for every dependency in my project is a win... It's a freaking router! I don't want to have to debug my router, I just want it to freaking work 😢

Oh man, I was looking for an angular-like routing for react and then this video pops in my recommendations, this is awesome

What a great video. After watching the og stream, holly editing Phase. Even changed the BGM of tanner's (cool) lauch promo.

React is becoming more and more its's own Rails framework😂🔥

the word, tanstack always brings joy to my ears

I built a router on top of a router to add params and such to the Inertia router because the inertia link really just sucks. And then on top of that, I ABSOLUTELY hated doing breadcrumbs in complex systems where going back to and keeping context is just such a pain - so I simplified it so my links have a "backTo" which just takes a text prop. It stores it in the SPA's state, and then captures the link to the previous page automatically. If one is defined the breadcrumbs just work from wherever the user came from. If none is defined, it uses the breadcrumbs component's pre-defined back link and text. Easy way to solved a really complex problem.

Anything tanstack is usually a great choice. Im excited for this!

There is a package that does this with nextjs named nextjs routes. It override the types of all Link and router methods to be typesafe.

I love how React is catching up to Vue now

This is all amazing stuff!!!! Well at least until v2 where half of it will be presented as wrong and something that had to re-write :)

Tannet should get a noble price❤

With Vinxi now gaining serious traction, I think we’ll see a tanstack router Next alternative very very soon.

this is damn good, I better start using this on my pet projects

so its angular routing

imagine being so excited about this

How about you make a video presenting some features of react aria components? This library is just stunning, we no longer need downhshift and 30+ other libraries for all the types of inputs we use.

Do you think it could be added to create-t3-app as optional part?

I have tried it and its very useful. Now I dont need to create a CONSTANT map of URLs to type safe the redirect links.

I really don't like file system based routing for server components so this is very promising for me

This is dope. As much as people love to hate on codegen, I would die on the codegen hill. I've written a custom file-based type-safe router with Zod, Cloudflare Workers, and a boatload of generics. You could not pay me to do it again. I don't think the issue lies within the "TypeScript sees everything as a system" concept; it's trivial to overwrite types for a certain file route (if you're doing some form of file-based routing, custom or not). I think the issue likes within "who is going to write these types?" and DX. Codegen solves both of those issues. I'd love to find something like TanStack router that could be used in more generic JS projects.

I've been waiting for this as well, ever since first hearing about this. Never thought about putting it into next as a [...] route, which is a great idea. I'll play with it at some point for sure.

it's So crazy. Thanks to tanner

lets abstract an already abstracted layer further; great idea.

RapidOS uses internal URL as well as its core system libraries and classes, URLs can of course have parameters and it has the ability to use JSON or normal URL parameters somewhat interchangeable, if you want to call it routing you can, but I would call it dynamically loading and calling the constructor of a component...which is file based, but there is nothing to stop you using the same file for multiple purposes if you want. One of our goals was to ensure minimum memory usage on the client and server because some android devices at the time only had 256mb RAM and that can host the server for up to 20 users with good performance, of course there is a client on such a server also. The biggest issue with React is that it doesn't allow dependency injection or mocking of itself, so if you want to replace react easily, you are screwed.

"or, god forbid, an admin panel" 😂

Now I wanna know if we still need Nextjs or not?

I tried to hook this up at a slug within a nextJS project, and find a way to automatically look through links, without the autocomplete breaking. It did not go well

You look like an iPhone user who's happy about that cool new iOS feature (that existed in android since the beginning of time). I believe Nuxt (Vue-based framework) has had typed router (and more of these features) for a couple of years now

Works this with next js good ?😊

Having used Django a lot, this feels fairly familiar

trying to implement it. stuck on the part where i need to make two modals (as routes) into children of the index component (the "/" route). code-based case is alright, i can do it. but the file-based - have no clue. in react-router its just nesting, but the file thing is not so clear. if somebody somehow has the answer - i would appreciate some help, thanks

This can also work with NextJS?

I know this is a stupid question but can i use this in React-Native for mobile apps?

I'd actually want to hear the rant about query params 😭

Can you introduce how to use tanstack router with i18n for multiple languages for website

I LOVE LOVE LOVE tanstack table. We're using it for multiple purposes on our application. We have a pretty complex dashboard that is using searchParams from next based on all kinds of different filter drop downs. I would love to see you do a video on what you mentioned, implementing tanstack router in a next.js application for at least the complex dashboard use case. Thanks for doing a video on this.

Can you use it in React Native?

I've been wanting to know what the browser you use is for a while but I haven't seen you mention it in any videos (I could have ended up missing you casually mentioning it in a video but I _have_ tried to find it). Could you add an entry on your website's FAQ page with what browser you're using? If it's chromium-based, I'll still probably not use it, but I have friends that I think would love the UI/UX of that browser. I've also seen someone else ask about the browser in the comments here, so it's not just me who wants to know lol

Haskell has had typesafe routers for a decade or more - glad to see it's catching on in other ecosystems too!

Can this work together with NextJS

tanner is a reptiloide 😆. is my god

sorry, what browser is being used? thank you

Seems cool I just wish people would stop doing file based routing I hated having files or folders named [id]

Tanstack Framework coming soon 👀

I'm not sure about this at all. What if react router goes fully type-safe tomorrow because of the competence? Right after we all migrate to tanstack router? That doesn't make sense. There should be a huge overkill set of features that are really important to consider migrating.

This is my biggest problem with astro that you can make dead links very easy

React Navigation has typesafe routes with autocompletion :-)

Starting to feel like we're only a few steps away from the TanStack ***FRAMEWORK***

It's like React is turning into Angular.

But is it BLAZINGLY FAST?

Nuxt already does this

i cant wait to replace my router lib again

Can it be used without codegen?

I want to learn vue but have been using php so long I when I do come up with a server side project I struggle with not just doing it in php and am bad at dev in general [ i understand that you can't help me with that though] ...

Everyone is just rebuilding rails

so we're back to doing SPAs now? 😆/s

How does Tanner work on all this stuff and release it for free?

You should do an example of what you were talking about with interoping next and tanstack

I just want symfony style routing 😔

hmm very nice

Is dat juiciest Javascript drama?

Ia it Next.js?

What editor are you using Theo?

I mean, this is awesome, but just so you know expo has the same link functionality* (route name autocomplete & typesafe params) but for React-Native obviously

1:08 - you don't know about expo router :)

would love to hear more of your thoughts on remix

I like generouted.

Nuxt has all of this 😅

Wait aren't params and searchparams just strings ?

Pretty sure dioxus router has most of this

So ... basically, Angular's router sibling?

first nah 😍😍😍😍😍 will next.js have it own AI assistant in the future, Theo?

I clicked because I thought this was about a network/internet router 😅

I'm a college student and at this point, I'm a pretty good web developer, but i am just using these tools.. i wanna know what it'll take to get there and build such tools? Ten's of years of experience?

at 18:44, "examples were ? based" What was said there? Unfamiliar with what he said.

Omg 😨

Ok; watching it makes me feels like angular is really the way to go to build spa apps.

"Since all your route definitions exist as files..."; Remix provides config based routing 🤨am I missing something here?

Bruh! You have to be an AI at this point. How do upload everyday

I hate UX with modern routing when page just swaps. Like in vercel website and other react stuff. It is so unfriendly IMHO

THAT MODULE DECLARATION FOR THE ROUTER!!!! WHAT!?!?!?! Why does tRPC not use that?!

File based routing is a toy made to make feel better the dumbest kids in the classroom.

Damn Tanner, nice router.... you single? 😉

like what they built a whole new framework

good morning Theo

Nuxt has something similar… It's just vue better.

vc companies get all this money to let a solo developer out do them

Remix is where React Router went to die. RIP begging them to add APIs necessary for auto tracing.

What's is the deal with type-safe router? I have no idea what is this trying to solve.

most average router. Except in frontend dev💀

The beginning and end of this video were great. The middle felt frantic and I could barely follow.

I was hoping this would be about a hardware device to route traffic on a network, but I guess a thing for managing projects to ensure links are kept up to date is cool too. Of course, things like this make it even more difficult to get devs to abandon all the old tech to wipe the slate clean and start fresh. If only we could fix the flaws in the current tech without wiping everything away.

This is monstruosity. React-Router is a mess, but this is no better. Vue has better, way simpler routing

Why are you posting videos at ungodly hours

I think "type-safe" router is solving non existing problem kinda thing and only over complicates stuff