TanStack Router

[00:00:00]
>> Brian Holt: Let's talk about TanStack Router. Somebody in chat right now is just smashing their keyboard, what about React Router? Let me get to you first before you ask me that question cuz I know someone is out there just immediately just pouncing on that. What about React Router? What about it?

[00:00:22]
That's it, though. Okay, now TanStack Router, no, I'm just kidding. Why did we choose TanStack Router for this particular course? Historically, I've taught React Router for almost every iteration of this. There was one that I taught Reach Router, which then got folded into React Router, so effectively React Router.

[00:00:42]
Couple of thoughts here. If you want React Router, you can go to v8 of this course. So it's just React V8 Holt courses. And you can see right here, React Router, all of this is very applicable, up to date, feel free to pop in there and look at that.

[00:01:06]
The reason why I chose TanStack Router for this particular course is that TanStack Router is very focused on client-side React routing. That's what their goal is., that's their primary use case. And React Router has, I'm gonna go with equal attention for server side routing, aka Remix, right, and client side routing.

[00:01:29]
It works very well in client side situations. Feel free to still use React Router, you'll get only slight side eye from me. No, I'm just kidding, it's great, totally fun, and I've used it for years. But I appreciated the direction of TanStack Router and their exclusive focus on client side routing, which fit better with this course.

[00:01:50]
So they work quite similar. So learning one, you're gonna get a kind of a rough feel of what the other one works like anyway, but that's why we chose it for this one. They've actually announced that React Router v7 and Remix, they're converging, they're gonna be the same thing.

[00:02:11]
So remix will eventually just be React Router again. So, hopefully that's enough of an explanation of why I chose TanStack Router. It was a bit of a controversial decision, but I think you'll be very pleasantly surprised that it's a really good developer experience. I really like it, I've been using it quite a bit.

[00:02:33]
>> Brian Holt: So the docs are great, feel free to pop in here and look at their docs. We are gonna also be using TanStack Query today as well, it fit really well. TanStack Start is kind of their version of Remix next, right, where it's kind of a more full-stack solution, or maybe even closer, create React app.

[00:02:54]
It's kind of their more opinionated meta framework for TanStack. And then I've looked a little bit at store as well. This is essentially their Redux, which I have not used hardly at all, because I don't think I need it anymore. Anyway, they have a bunch of really cool components, forms are interesting.

[00:03:15]
I think Virtual is the one that allows you to do, yeah, you have a massive UI, let's say you have to render a million rows of a table. TanStack Virtual can help you with stuff like that as well. In general, React has just a phenomenal ecosystem of really cool stuff.

[00:03:31]
And today we're gonna be using two stuff from TanStack just because they happen to work really well together. But you should definitely go explore. If you have some idea of, man, I wish there was a code editor that I could use in React. Lo and behold, there's definitely a code editor that you can use in React.

[00:03:48]
There's a text editor, there's all sorts of cool stuff. We are using Router today. Other thing to mention here is in intermediate React, we will be using something more full-stack. Have not decided, but likely next, right, just because again, that's kind of the ones that people default to.

[00:04:07]
>> Brian Holt: So in other words, we will not be using TanStack Router in intermediate. So if that's something you're interested, stay tuned, we'll talk about it. And again, I just wanna emphasize, you're spoiled for choice here, there's a lot of good choices. Again, React Router, totally valid here. Okay, so open your project.

[00:04:30]
You can pause your vite server for a second. And we are going to npm install @tanstack/react-router1.65.0. There might be a new version of it available, but again, this is all the versions I tested together. I'm gonna do npm install -D. Again, I would just grab these directly off the docs, cuz it's a mouthful to say out loud.

[00:05:09]
But it's this one here. So TanStack, we put into the normal dependencies, cuz it's actually gonna go out to production, right? And these ones are dev tools. So there's a router plugin that we're gonna provide to vite, and there are dev tools that we're gonna install as well.

[00:05:27]
So there's actual tools they build into it that make it easier to use, okay? So install both of those.
>> Brian Holt: The nice thing about React, TanStack does this as well. Did you notice that all the versions are the same? That's because whenever they cut a new version of any of them, they just cut a new version of all of them.

[00:05:50]
And so if you're using 1.65.0, you just know, I just grab all of those, and I know all those work together. So you don't have to worry about, which one do I use with which?
>> Brian Holt: It is kind of annoying, though, cuz you end up with, there's a bunch of versions of them that don't do anything, right?

[00:06:08]
It's literally just another cut of the same previous one. The cost you pay. Okay, let's go to our vite.config, and we need to import TanStackRouterVite from @tanstack/router-plugin/vite. So you can see there's a webpack version of this as well, as well as ispack, which I know less about that one.

[00:06:42]
I think that's a Rust one. Anyway, definitely not the point of this course.
>> Brian Holt: Plugins, be sure to add this before React here. We're just gonna put the same thing here, just like that. This makes a TanStack Router aware of basically where all your routes are going. It adds some like niceties, and I'll show you some of those as we get going.

[00:07:07]
One of them is you're gonna see generated in your code is routetree.gen.ts.
>> Brian Holt: It's nice that this is a TypeScript file, because VS Code can read it and read the types, and it's gonna just make all the type completions work really well. This is a generated file from TanStack Router that you'll import into your project.

[00:07:32]
You do check it into Git. Generally, you don't check any generated files into Git, but this one you do. And it'll just continue to get regenerated as your project goes on. So inside of your source directory, we're going to create a new directory inside of that. So let's just go ahead and click +, I'm gonna just call it routes, and let's make a underscore, underscore, __.

[00:07:59]
So double underscore, or the dunder, as I was informed, as it's called. I did not make that up, the dunder, it's a Python thing, apparently, sprouty Pythonistas. so _root.jsx. This is basically, what is your route, or what is every route in your page I'm gonna have? So I mean, I guess it's probably worth stepping back, is like, what are we doing [LAUGH] here in the first place?

[00:08:31]
We're making a single page application, a spa, right, that has multiple different pages. So it's gonna have an order page, it's gonna have a past orders page, and it's gonna have a contact page. And we wanna be able to route from page to page. You want them to have unique URLs.

[00:08:49]
That's all the stuff that we're gonna be working on right now. The _root.jsx file is basically like, what code do all of these share together? What is the root of all of these page files look like? So that's what we're gonna do here.
>> Brian Holt: And this is what we're gonna put in it.

[00:09:13]
We're gonna say, import ( useState ) from 'react', import ( createRootRoute ) from '@tanstack/react-router', as well as Outlet.
>> Brian Holt: We're gonna import the TanStackRouterDevtools.
>> Brian Holt: Pizza of the day. We're basically recreating what was in app.jsx. We're gonna make app.jsx much smaller, and most of the stuff is gonna live in the root.

[00:09:57]
>> Brian Holt: Import the header.
>> Brian Holt: And import ( cartContext ) from 'contexts', export default function,
>> Brian Holt: No, sorry, export const Route. It's just a convention with TanStack, rather, that's gonna be looking for Route. So you do have to call it that. CreateRootRoute,
>> Brian Holt: And you just give it the component that it expects.

[00:10:40]
Now, you can get this just a function directly here. You could make another function and then reference that in there, that's totally up to you. With this one, we're just gonna put it in there.
>> Brian Holt: Okay, const cartHook. I mean, you can even just go into app.jsx and get some of this, right?

[00:11:00]
So basically everything inside a strict mode.
>> Brian Holt: Return.
>> Brian Holt: And then we have to make the cartHook up here.
>> Brian Holt: Okay, cart provider, put inside of a div, header. We're gonna replace order with something else. We're gonna call this outlet. This is the part that's gonna get swapped out, right?

[00:11:36]
So this is actually what's going to be rendered onto the page, and then we're gonna be able to switch all of our different pages into this particular thing. So order is one of the pages, right, then they're gonna click the About page, and the About page is gonna load.

[00:11:48]
Then they're gonna click that and it's gonna swap that out, and the outlet is where that actually ends up. I'm gonna show you one more weird trick. We don't have to do it this way, but I just wanted to show you how to do this. Let's say I wanted to, down here at the bottom, put in tans to our dev tools, right?

[00:12:05]
This is mad. Why is this mad?
>> Speaker 2: Cuz you can only return one, or one thing.
>> Brian Holt: Yep, it's the same reason I can't do something like this where I say, const thing equals 1, 5. There are languages that let you do this, right, but JavaScript is not among them.

[00:12:26]
You can only return one thing at a time, and this is returning two different things, right? This is returning this and this, because they're siblings and there's not one thing encapsulating both of them. It won't let you do that. So if I wanted to have thing to be both of these things, what would I do?

[00:12:46]
Just make an array out of it, right? Now it's fine, cuz you have one array that contains both those things. You can also do this with React, and it's with this weird syntax that looks like this.
>> Brian Holt: So it's an empty tag, right? And then this is like an empty closing tag.

[00:13:09]
Remember, what does React do in these situations? It just wraps stuff in arrays, right? So that's literally what this is, this is just wrapping these two things in array. Make sense? Yeah, kinda strange, but that is how that works. So if you find yourselves like, I wanna return two things as a sibling at the top, that's when you're gonna use something like this.

[00:13:30]
>> Speaker 3: I noticed we lost strict mode in the transition. I'm not sure if that's important for you.
>> Brian Holt: We're gonna leave that in app.
>> Speaker 3: Yeah.
>> Brian Holt: But that is astute. So let's head over to app.jsx and make our modifications over here as well. So we don't use state anymore, cuz we're not gonna be doing that in here anymore, we're doing that in the RootRoute.

[00:14:01]
We need to create Root, that's good. We don't need pizza of the day, we don't need order, we don't need header, all that stuff exists in our RootRoute. We don't need that. So we do need our import ( RouterProvider ) from "@tanstack/react-router", and we also need a createRouter function, this one, okay?

[00:14:29]
And then the other thing, we need to use that generated file that it's about to generate for us. So just trust me on this one that there's no file here now, but it will be by the time that we care. Import ( routeTree ) from this soon-to-be-generated './routeTree.gen'.

[00:14:54]
So again, it doesn't exist yet, but you'll see this show up shortly.
>> Brian Holt: Const router = createRouter with routeTree.
>> Brian Holt: Get rid of this cartHook in here, get rid of that. In fact, most of stuff can be got given away or just deleted. We'll leave StrictMode in here.

[00:15:24]
You might ask why, it could be moved to the other one, but my tendency is to wrap everything in StrictMode, right? So that's why. And then all we have to do here is say RouterProvider router=(router), and that's it. TanStack Router handles the rest of it for us. Right now we have order.jsx as just a component.

[00:15:50]
In reality, it's kind of a route, right? Let me assert, that is, it is a route. So we need to go bake it around. So we're gonna move order into routes. We're gonna move, you can say, update the imports, yes, please. Notice that it's now going for, instead of ./, it's doing ../.

[00:16:14]
That's the updates that it did for us.
>> Brian Holt: And we're gonna rename this. And this is their convention, I would have been tempted to name this with an uppercase, but they don't, order, lowercase o. And we're gonna call it lazy.jsx.
>> Brian Holt: This is signifying to TanStack Router. I want you to lazy-load this.

[00:16:42]
So you just put it in the name, and it's gonna know exactly what you want. It's like, okay, I'm gonna split the route or the package here, and I'll load this later. Whenever the user requests the order page, they'll get this, but they won't load it until then, which is kinda cool.

[00:16:56]
If I didn't put that there and it was just order.jsx, it would just load it immediately every single time. In our particular case, our components and our routes are fairly small. I probably wouldn't lazy-load these, I probably would just load everything every single time. But if you're building an app of any size, these routes tend to get a little bit bigger every single time.

[00:17:15]
So in that case, I probably would lazy-load, which is why I'm gonna show you today everything we're just gonna lazy-load.