React Location: Better than React Router?

welcome back to blue collar coder and if you're a fan of react query like i am you'll be excited to hear about react location which is tanner inslee's new alternative to react router which is more declarative and also works both on the client and the server side so it does everything that react router does but just in a more declarative style let's jump in and have a look at how all this put together so the first thing i'm going to do is create a simple test app and just walk you through the basics of this so do that i'm going to use mpx and then my create mf app and i'm going to call this test app it's going to be an application we're going to put it on port 3001 it's going to be a react app and we're going to use typescript for this we're also going to use tailwind for our css so that's the nice thing about that create mf app it just creates these very small apps that are easy to use the reason it's called mf is because it's around module federation and it also sets that up for you but we're not going to look at that in this particular video i'm new yarn and now yarn start on that all right looking pretty good and pretty basic basically just says our name is our app is test app is react type script and tailwind so i'm gonna go back in here i'm gonna stop the server and i'm gonna add react location and i'll start it up again now over in our test app i'm going to go down into the source directory we've got an app.tsx file i'm just going to bring in router and route and outlet from react location so the first thing i need to do is just define a few routes i'm going to say routes and then that's going to be an array of routes and i'll start off with the home route so i'll say that that is path slash and then i'll just give it an element i'll say element is home page all right and then i'll add another path let's say cart i'll call that cart page awesome cool easy enough so far so now i'm going to put in a router down in my app and a router is going to take those routes and it's going to put an outlet on the page and that outlet is where you want the content to go so i'm actually just going to replace all of this with that outlet cool but we're missing one more thing and that's the location our current location so i'm going to bring in react location and i'm just going to go instantiate that i'm going to say that our location is a new react location and then i'm going to drop that in there as the location prop and we'll see how we do let's go back over into our app now we can see that we're on the home page and we can go and navigate to cart and we're on the cart page how cool is that all right so to do navigation i can just bring in the link and then i can put a link anywhere on here i can say link go to cart and i can tell that where it's going to go cool and i'll go back to the home page click on go to cart and now we're on the cart page just like that so that's a spa navigation or a single page application navigation so you don't actually go off and fetch anything from the server unless you need some data and we'll get into that in just a bit okay and then one last thing i want to talk about before we get into this is if you have like a nested route so you might expect at this point that you could do something along the lines of product slash id and then you get a product page and let's try that out let's go to product one okay that seems to work so let's go over and use use match and that's how we're going to get the data out of that route so i'm going to create a really quickly just a product component here i'm going to say that our params are use match dot params i'm gonna return a div with product page and then json.stringify and the params all right let's take a look let's drop that in there for the product page all right cool that works but there is another way to do this which i think is a bit more declarative you can also create a children array here and have this be nested so within this i can create yet another path for id and that would have the element on it i'll make this just product and so this just reads a little bit better to me but it's totally up to you which one you want to use all right so i've taken this example about as far as i want to take it so the next thing i want to do is i want to show you an e-commerce application and it's a pretty simple demo ecommerce application currently using react router v6 and what we're going to do is port that over to react location so what i'm going to do now is do yarn start in that directory all this code is of course available to you in github and here's our homepage it's a fidget spinner e-commerce store so what you can do is log in and from there you can add items to the cart you can see the card over here you can click on an item and add it to the cart or update the count of it in the cart and add new car items like that you can click on an item and go to the product page so you can see that's product two in this case and then finally you can click on here and go to the cart and see all the stuff in your cart this person person's going nuts when it comes to buying fidget spinners i guess so yay for that awesome for us okay cool so we're going to import this over to react location all right so the first thing we're going to do is go into our ecom app and then we're going to remove react router dom and then we're going to add react location so this is basically a heart transplant until we get pretty much down the road with this we're actually not going to have any safe save points it's pretty much an all or nothing deal here so not really sure if there's any way around that one hold on to your butt all right i'm going to do a yarn start now and obviously it's just blowing up all over the place because we have no react router dom okay so to start this out i'm actually going to go and take part of that code that we wrote before this set of routes and also this import statement and i'm going to go over into our ecommerce app and in here i'm going to go create a new file called router.tsx and pop that in there and i'm also going to pop in our list of routes and our location i'm going to put that all in there for our routes and so this is sort of the global declaration of all of our routes we're going to use that because later on we're going to have some typing in here when it comes to this react location about the payloads so it's nice to have this kind of all in one spot all right so the next thing we need to do is go over here into our components and most of this the react router work in this particular app is done in this main layout so main layout is a component and it basically has the header at the top all the routes and all that and so you can see in here the react router v6 components router at the top you got the routes and then within that routes and within that route where you give the element and the path and it's pretty nice i like it but it doesn't do some of the things that react location does as easily so that's kind of why i'm doing this right now okay so what i need now are the contents because that's actually what we want to route to so let's bring those in and i'm just going to drop those down here where they're required so in this case that's going to be pdp content and in this case it's going to be that home page content and here it's going to be that cart content all right cool not too bad so this also needs to go to components all right looking pretty good now in here we're not going to need router or outlet or link or use match but we will need react because we are actually doing that jsx in there so we'll ring and react from react all right and of course we need to export this and we need to export the location think it might be cooking with some gas so let's go back over here to our main layout and i'm going to change this to react location we're going to keep router there and and also bring in outlet cool and from here we want to bring in routes and also location from our router get rid of all that let's see so we've got router down there that's good and we want to say that our routes are the routes that we just defined our location is the location that we just defined and then down in here we just specify that outlet outlet okay cool so now we got a few more connections to react router dom so let's go find those so i'm going to go over here cart content and see if there's anything nothing is there anything in the footer or the header nope not in the footer oh there's a link in the header so let's change that out to react location nice let's go over here to home content there's a link in there when you click on one of the products that's a react location link cool login doesn't have anything main layout nope that's what we're just were mini cart doesn't have anything and pdp contents okay so we've got use params here so that's going to change to use match change that to react location use match and we'll just de-reference params there cool all right hey all right cool so we are now essentially ported to react location just like that so that's pretty cool nice let's make sure that we have a nice cart page there yeah looks awesome how easy was that that was that was quick okay so the next thing i want to show off is asynchronous loading of components and how easy that is so let's go back over here to our router and what's happening right now is that everything is lumped into one big old bundle and what we can do instead is actually make these elements asynchronous so to do that we just make this a function so then i'm going to import exactly the same thing so in this case home content from components that's going to give us back a promise so i'm going to say then and that then is going to bring us back a module but instead of returning default we're just going to render it as an element okay cool nice all right so let's see if that works let's go over here and hit refresh and that seems to work that's awesome all right so let's do the same thing for pdp content and cart content so i'll do element again in this case i'll do pdp content and then i'll do element again down here and do the same thing for card content let's make sure that we still work yeah looking good all right let's refresh and go over to the home page and we'll go into the network panel and we'll see if we're actually doing asynchronous loading of these different routes all right so we've got js selected i'm going to hit refresh and we'll see that we get a whole bunch of stuff including the homepage content and right click on drakenspinner which is the detail page we get a new load down in here of that one cool yeah source components pdp and now when i hit the cart page i get the cart page so there you go asynchronous loading of routes just like that all right so the next thing i want to talk about is asynchronous pre-loading of data so let's go back here and i'll show you the product detail page right so this product detail page let's look at how that actually works so go into pdp content and we'll zoom down here and we can see that it gets the id and then it has a place to store the product which is stored as a state and then it does a use effect and it says okay well if the id changes then we're going to go get a product by id and then we're going to set that local state and if we don't have anything loaded yet then we're not going to show anything which is kind of i'm not super happy about this so what we're going to do instead is have a data loader on that route and that data loader is actually going to do this get product by id and it's going to store that data in this use match so that by the time that you get to pdp content you will have the data for the product ready to go so you're actually going to stall the loading of the route until you have the data to render that route all right let's go back over here to our router and clean this up a little bit so get rid of those so we're going to do is define we have a loader for this particular route it's going to be an async function that takes a set of params just like we had before and then we're going to return a product where we await the return of get product by id on that params id cool right and so now ins cool right no that's gotta all right let's add a comma down there nice make it all good okay cool let's make sure this still actually works i'm gonna hit refresh nice okay now if i go over to the pdp content i can say that the product is coming through the data and let's get rid of all of this hit save and now it runs but it doesn't know what the type of product is because we haven't specified that yet so what we're going to do is we're going to go back into our router and i'm going to bring in the definition of product and also make generics i'm going to come down here and export a type called location generics and in here we're going to say that the loader data returns a product and the that's of a type of product cool all right so let's take that location generics go back over here into pp content i'm going to bring that in from our router i can import that as a type if i want to and then in here when i use use match i can properly type out that data and now i can also do some nice clean up in here cool cool and wow this is starting to look really nice i like that i like that look a lot okay very clean so now there is one more thing that does that same type of loading and that is the home page so let's go back over here and the home page has the exact same problem so let's go and take a look over the home page and see how that's working same thing over here we got our list of products maintain this state internally we've got a use effect that loads that so hey can we do better yes of course we can so go back over to our router and i'll start this time again with the loader so again we're going to have an async it's going to take nothing because we don't need parameters right we're always going to get the same thing so we're going to get our products and then we're going to return our products where we await the get products and so we also need to bring that in as well and then just one last thing we need to go down to our location generics and add that so products in this case will be an array of products okay cool nice all right so now the home page route is only going to load after it does this loader to get all that data cool so let's now go over to home content and see how to make use of that all right so we need use match so let's go over here to pdp content we'll bring in use match into home content and we'll also bring in that location generics to make it nice and then over here in pdu content let's just also bring in that use match and we'll replace products with products just like that get rid of this use effect and we'll see how we do let's make it get my ocd going there yeah all right very nice very clean okay great okay and then there's one last thing i want to show before we wrap this up and that is the import of a whole module so when you think about it home content is actually broken into two pieces now right so you've got the router part over here with the loader and you've got the element part over here that's bringing in that home page component so what if we can actually fuse those two together into a home page module so let's try that let's go and take loader here and this element and i'm going to create a new thing called home module dot tsx and it's going to export by default this home page stuff so of course we need the get products let's do that all right looking pretty good and then we'll also bring in react so now we've got this home module and we can go over here into router so instead of this we are going to import and then we're going to import that components home module and then from that we're going to get a module again and we're just going to return the default now let's go back over to the home page and it works just fine so here's a really cool thing right if you've got home page and it's actually in a different npm library for example that mpm library can just have that module and it can define for itself all of the data preload that it needs as well as how it's going to be rendered and it can do it all in one spot you don't actually you're pre-loading and your rendering logic is all in the same place all right so let's do the same thing for our pdp content and then of course all of that code will go to you in github and you can play around with it yourself so let's go over here and copy out loader and element and again i'll create a new file called pdp module tsx and i'm going to import react and i'm going to export the defaults of that loader and that element this is going to be the same directory so i don't need that and then we need to get skip product by id awesome looking good okay let's go back over to our router and then in this case we just import and we're just going to do the pdp module instead of the home module nice okay let's try it out refresh yeah works great cool so now the pdp content is basically all bundled together and you can imagine that that would be in an extracted npm module that would just be around the pdp and a lot of that pdp page to run independently pretty cool stuff all right well i hope you enjoyed this quick look at tanner inslee's awesome new react location library and are gonna try it out yourself and see if it's a decent alternative to you to react right or dom or how they compare of course if you have any questions or comments be sure to put those in the comments section down below i look forward to reading all of those in the meantime of course if you liked the video be sure to hit that like button and if you really liked the video be sure to hit the subscribe button click on that bell and you'll be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 9,854

Keywords: react router, react router dom, react-router-dom, react router link, react location, tanstack react, tanstack, tanner linsley, jack herrington, react routing, react router v6, React Location: Better than React Router?

Id: i8kner-Yrj0

Length: 20min 36sec (1236 seconds)

Published: Wed Nov 17 2021