hey guys how's it going welcome back to another video and welcome to my full complete course on the new version of react router and the new version of remix react router version 7 in this video I'll explain to you guys how react router is now being used as a framework instead of a library and show you how it can be used to build powerful datadriven react applications we'll start with the basics installing setting up routes and move through key features like data loading server side rendering form actions and more by the end you'll be be able to see how react router streamline workflows by the end you'll be able to see how react router streamlines workflows improving your user experience and simplifying complex tasks allinone cohesive system before we get into the video if you could leave a like And subscribe this will tell YouTube that you want to watch more of my videos which would really really help by the channel so if you want to support the channel that's a great way to do so so without further Ado let's get into the video okay everyone let's get started the first section of this tutorial is obviously how are we going to generate an application using the new react router framework well you can use a template if you want to uh but we're going to start everything from uh an empty uh application not using any uh templates we're just going to run the command npx create react router and we're going to set it to be at the latest version and uh I'm just going to put a dot here to represent that I want to create this project inside of this folder that I'm in and I'm going to press enter you're going to see it's going to ask us a couple questions uh it's going to use the default template I said we weren't going to use templates but I kind of meant like templates with already some stuff uh other than the default one uh it's going to ask us if you want to initialize a new G repository I'm going to press yes install dependencies I'm going to press yes and then it's going to generate the project for us perfect now we can uh do npm run Dev and you guys will be able to see the project appearing I have here this uh browser and we should see that it should be running on Local Host 5173 and this is the baller plate uh app that appears now that we have installed it let's go into the second section which is explaining the basic structure of the react router version 7 application so you see there's a lot of files here that are very similar to if you were using any other framework uh react router version 7 is created using vit uh in this case as you can see over here we have our vit config with all the necessary plugins uh it also generates the application using Tailwind CSS and uh I I guess you can change that if you don't want to use Tailwind uh but I do recommend using it we also have this react router config.txt uh configure anything related to your react router experience but we're not going to really be touching this um then there's a a bunch of Docker files could help you if you are looking to deploy your app using Docker uh the templates come with three uh different Docker files which are optimized for different package managers so there's a Docker file for uh npm there's one for bun and there's one for pnpm so if you want to build uh using those Docker files it's really easy to do so uh and it also has support for I believe all of the different platforms so you could use use uh you can deploy it to I don't know an ACs on AWS you can deploy it to a digital Ocean or Google call platform whatever you want uh and it has this files over here but if you're not using Docker you can just ignore them or even delete them uh feel free to do so as well now the next thing we have here is our public folder which it's the same for almost all react apps just where you're going to have your static assets and all that kind of stuff uh but on our app over here this is where every Everything Changes a bit so the f file structure for react R version 7 um it reminisces a bit with remix uh and other uh Frameworks in the sense that we're going to have here our our root of our app which is our root. TSX this file is going to be kind of like where you define your layout for your app with the how your actual HTML structure is going to look like uh so there's obviously metadata there's uh there's different links you're going to have scripts all you're going to have uh there's an error boundary for dealing with any possible errors that you might have in your app uh such as running into a page that doesn't exist and it it autog generates that for you uh but then also there's the app component over here which it returns an outlet and an outlet by default is just uh component placeholder for any component that is going to represent the different pages in your application so that different routes so if this route Outlet over here if I were to wrap this around with a div right and I were to put a little P tag here that says hey that means that no matter which route you're in this hey is going to display because the route component the component that is displayed depending on the route is the one rendered on this Outlet component so if I were to go to uh not this if I were to go to for example SL Pedro this isn't a route uh actually this won't be a good example because there's no route but you you'll see as we go on uh that this should show up so you could put for example a navbo here if you wanted to but there's other ways to do this as well so for now we'll just keep this as an outlet and uh leave it like it was before but this is the basic of the root. TSX file it's where the root of your app is and where the entry point of your application is now uh we get to the so this welcome here ignore this this is just a component that comes with a baller plate we could technically delete this if we wanted to um and that's exactly what I'm going to do actually I'm just going to delete this it's going to break our app for a second but uh it will help us I'll just actually delete this from here uh so delete the only part of the app that calls it and let's just return nothing uh actually let's return hey uh so what I think I should explain to you guys first is what how does routing work on this framework so routing Works in a kind of different way from what you might be used to um in react router the routing is configured inside of this file over here called routes. TS this file is only meant to be used to define uh the pattern of how your routing system is actually going to work so you see we have this export default and has an array with only one uh item inside of it this item is defining our index routes so our home routes and you can see this is what is actually rening over here so we have files in this routes folder and we have one called home. CSX what this index is saying over here is that it's saying that we're going to render the index route so the initial route and we put the path to where this route file or the component that is going to be rendered exists so if we wanted to change this to a different component we would just change the path to that component now this is how you do the index routes the initial route of your app but if you want to Define more routes we could do it something like this I can call this route function that exists in this same package and then I could just come over here and Define another route let's create another route for this app let's call it the about. CSX route over here let's just export const about and let's export a component that just say just says something like uh Hey welcome to the about page now what we can do is we can set the path to that file over here and usually that will be routes SL whatever file name you have you can create folders inside of this routes folder as well if you wanted to let's make this about. TSX but since this is a route and not just the index route you also have to define the path to this specific route so we put that actually first over here uh before where we Define where our file is and we just write the name of the path so for example in here we're going to have the about uh route so we can just put about over here and it will know that this is the path name to that route now obviously in the index route we have the text saying hey so that's why it's showing this now but if I were to go to the about uh page now you see that this is an error that shows up and it's asking for a loader we technically don't need a loader if we don't want to but one thing that I was uh I wanted to show to you guys is that in the home. TSX over here we actually have a specific syntax we need to use to satisfy the route notation so we have to export default not export const like I was doing so I'm going to change this um to do the same as before so export default function about and now this should actually work and show the about page like we wanted to now this is how we create a simple route but routing is also a bit more complicated than that because there's multiple situations in which you might want to handle it differently you might want to have routes that are nested inside of each other you might want to have I don't know routes that are grouped with some sort of UI that combines them so how do you handle all of that using react router version 7 so for example let's start with how do you define routes that are going to accept parameters to their route definition well let's do one over here let's um I don't know let's create one for uh posts it's the most simple example uh let's actually call it post. TSX and let's imagine that this is a component that is going to display uh information about a post uh if they based on a specific ID that that post has so it's going to fetch data uh from an API I have actually a public API here for you guys to use we're going to be using this Json placeholder API you guys can just go there it's a mock API and if we fetch data based on for example a specific ID if we put three uh it will return back the post of ID 3 so what we want to do is create a component that is a page that when we go to that page in our project if I go to for example uh post slash3 what will happen is it will show the UI for this data how do I do that well I have to create a function for this and let's call it post over here and for now let's just return a div with nothing ins of it now let's come to our route definition and let's add another route now this route is going to be to the post. TSX and if I want to say that the route has some sort of PM in it all I have to do is just add the PM inside of here let's call it for example post ID now this is standard on multiple other routing libraries uh but what we need to do now is in our post. TSX we have to uh load this this Pam into our component now if you're are familiar with remix because remember react rer version 7 is basically remix version 3 they merged uh react router version 7 like react router with remix and made react router version 7 so this is the pattern with getting data in remix we're going to have to export an async function called loader so every component is going to accept a loader function and an action so I'm also going to make the action here so you guys just have an idea these are the names that uh remix or react router will be looking for in every component and if you don't if you name it something different it won't work the loader is where you're going to be able to load data from different parts of your app and uh the action is where you can do some sort of action based on your component so in the loader over here here for example we would want to uh grab here the perms from the route and we can easily do that by defining the params and saying route. loader arcs now we have to import route and it's not actually from react router we have to import it from SL at types slash um we want this specifically to be about post Now You See It generated the specific types for the Post component that means that react router version 7 comes with type safety and it generates everything automatically for you you don't have to worry about it at all you'll find the types for each each specific route that you have in this plus types folder and in this respective file inside of it now we want to access it knows automatically that there's going to be a post ID ARG a post ID perm in this route because of the type generation so we can just say let post post ID is equal to actually I'll make this a const so const post ID is equal to perm. poost ID and now I have access to it I could technically just return this I'm not going to actually fetch the data uh because we'll get to that point later on in the tutorial but I could return this over here and you'll see that to access that in in my actual component and display it in the screen I just have to destructure it from this we can actually get something called the loader data and this will be we have to define the type it will be route. component props and then inside of here we can just display the uh post ID so I'll say post ID is equal to uh Lo loader data. poost ID and now depending on what post or what route we're in it will actually get that information so it's very simple not that complicated you have to use the loader for that and you have to get the loader data for that now how do I create nested routes which is the next thing I think would come into your mind whenever you're working with some sort of routing Library well the thing is uh we want to create here as an example let's let's imagine that actually I use both the post and the well to do something like that let's come over here and let's create uh an example let's create a route called dashboard so we'll create one called dashboard. CSX and let's imagine that inside of dashboard there can be two different other routes there can be the route where we're able to see our finances I mean this is all an example but uh and what else can we see uh our personal info now let's create the components for the three of them I'm just going to actually copy and paste from the about components so to make it easy for us let's just paste all of them so we can have the UI here I'm going to close this let's change it to dashboard let's change this to finance our finances and then let's change this to personal info now let's change also what's inside of this let's say welcome to the dashboard page then on this one let's let's just say showing finances and on this one let's just say showing uh personal info perfect now what I want to happen is I want to have a route where if we go to slash dashboard what this will do is it will show uh the dashboard obviously but depending on if we go to SL dasboard slf finances or SL Das board slash uh personal I need to write this wrong right so personal info what this would do is it will show the dashboard but with different things inside of it so how do we do that well it all comes down to the routing definition let's add u a section here so you guys can can have it separated and call it nested routes now inside of here we're going to put another route and then we're going to first Define the dashboard route and inside of this we'll just say that it's on the routes SL dashboard. TSX now the different thing here is that we need to put another argument to it which is an array of child routes that are going to exist nested inside of this dashboard route so we'll Define the for example uh the finances one over here by saying finances and then uh Slash actually we'll just say routes SL finances. TSX and we can do the exact same thing for the personal info personal info and then personal info. TSX so nasted routing is pretty simple all we have to do now to actually make this happen because we'll see we can see the the dashboard page but we're not actually seeing the personal info component inside of it and we're not seeing the finances one inside of it so how do we do that well in the dashboard page we can display anything we want but we also need to put an outlet inside of it to tell react router that this is where you're going to display the child com uh routes that exist inside of this nested route so similar to how we have the outlet in the rout we're going to have the outlet inside of here and it's it's basically just putting the outlet where you want to display that other component and you'll see that now it displayed the child depending on if we're in finances or in personal info so it's really simple to do this I think it's probably the easiest implementation of nested routes uh I've seen so far and I think it's really useful as well now there's another type of nested uh routes that you can have in react router that uh doesn't actually require you to add any segments to the URL like here we have a segment for that dashboard but if we wanted to make this without actually adding that that segment we could do so as well now how do we do this well it's as simple as turning this instead of a route turning it into a layout now we for this to work we have to remove this because there's no more path because it's not a route it's just a layout but what this will do is it will allow us to add some UI elements to both of this routes and make it permanent on both of them so this route doesn't exist anymore but personal info exists and finances exist and on both of them it will not only show what's inside of the personal info component this one over here but will also show what is inside of the dashboard layout and we'll go to finances and you'll see that it will also show the same thing so it's a a Nifty way for you to for example add uh if you need two components to requ to have a certain part of the same UI um you can just render a layout on top of them and then just pass those components over here without having to actually make uh the the URL have extra uh text inside of it and again again for the layouts is the same thing you will render the child routes by just using the outlet component as well now the last actual routing thing I wanted to talk about before we get into some of the other uh parts of react router version 7 like fetching data and all that kind of stuff uh is the idea of a prefix uh and this is less important but at the same time I think it's kind of cool uh and what this is is imagine that I want to add um I want to do the opposite of what a layout does I want to specifically add um some sort of prefix to this route to all the routes both finance and personal info how do I do that well what I can do is I could inside of this Define a prefix and a prefix will allow us to put for example a specific part of the URL over here I can call it Pedro and then I can just pass an array inside of this put all the routes inside of this as well and what this will do is it will add the pedrol uh text behind both the finances and the personal info routes so you'll see that now the finances doesn't exist but the SL Pedro finances exist and the/ Pedro SLP personal info exists so this is kind of stupid because you technically could just instead of doing using a prefix and a layout you could just use a route on top of this and call it Pedro and then put this file inside of the Pedro uh route but this is just an example I'm showing to you guys you can use prefixes in multiple other situations we could use f uh prefixes over here as well which would make it less redundant because uh what we could do is just put the prefix inside of this close this off and let's just put a comma and now the routes that have the Pedro are the um about route and the post route so if you go to about you'll see it will show the about page and we can't actually actually see it anymore if there's no Pedro in front of it so yes this is all I wanted to explain in this brief overview of the different routing notation for your react router V7 application uh now let's go into something a little bit more interesting which is uh the different rendering strategies that you can use in your react router application so first of all uh if we go to our uh let's close this up let's go to our react router config over here so react router supports multiple rendering strategies the first rendering strateg strategy that they support is client side rendering which means that the entire app will render in the browser and if we want that to happen we just have to set this property over here server side rendering to false and this will completely disable server side rendering now if you want to do that a lot of websites only render from the client you can do that now I I'm not going to make this in videos not about the difference between serers side rendering and client side rendering there's multiple videos out there and I've made videos about it as well but the gist of it is that there's benefits and there's negatives to each of them the main benefits I see with serers side rendering is it's it's a lot faster in in multiple ways and what it does as well is it is way better for SEO because uh the HTML is rendered before so that means that uh all of the keywords that you have in your website are accessible by uh search engine Bots meaning that you'll have a weight easier time ranking higher on Google search so there's benefits for server side rendering and I definitely think in my experience I'll I'll leave it on as true uh and that brings the other part which is if you want to set it to turn on server side rendering You by default it's already true so you won't have to do anything but if you change it in the past just set it to true and that's it now there's a third option which is the idea of having static pre-rendering and what this is is it will generate static HTM and data payloads at the build time so to do that what we can do is we have to define a pre-render function so I'll disable this over here I'll take this out and let's just Define here uh async pre-render function which will return an array of the different routes that we want to pre-render so we'll have the index route we can have the about route we can have the uh personal uh finances route or personal info route all the different routes and why you would want to do this is because pre-rendering is a build time operation that will allow us to generate static HTML and it will be extremely useful for both SEO and performance so this is a great option if you are someone who wants to do this and would rather Rend them at Bill time rather than render rendering them dynamically on the server or just on the client personally I've seen uh improvements on performance in a way I haven't seen major improvements on performance but it's it's it's set to improve your performance but also better SEO uh reduced server load and it is easier to predict how the user is going to experience the app because each user will see the same version of the page when you initially load your application since you're pre-rendering the application this consistency can help you deal with unexpected States or delays that may be caused by runtime data fetching and uh I think it's a great option and I I think it's super easy to implement it I personally will just use serers side rendering because that's how I like to build my applications now this is the basic idea of the different uh rendering strategies that you can have in a react router app now let's go into how to load data inside of your app so we talked about uh I believe it was was it in the about no it was in the post right and I I left this API uh up for for grab for a second but it was because I'm going to come back to it so I told you guys about the idea of an action and a loader and they're both uh important for many different ways they can be used for just it doesn't necessarily mean that you're going to be fetching or mutating data but uh they can also definitely be used for that as well so the basics of it is that in a react router version 7 and in remix in general data is fetched in the route modules using uh both the loader uh and and the client loader functions or or both if you need to now what is the difference well we have here this loader function but the loader function it is used to fetch data for serers side rendering or for pre-rendering so if we had our server being uh created here in our application we could call make those server calls inside of this loader however we don't have that as an example we're going to be actually fetching data from a public API so in that case we would want to have a client uh loader now the loader is also used for accessing uh navigation now since we are going to be fetching data from this API we actually want to change this from a loader to a client loader and uh over here we can keep everything the same it will all remain the same even with the loader data over here now the only difference is that now we can actually fetch the data inside of here by doing something like const res is equal to await and then we're going to fetch and let's put the API route over here let's change this to actually just put the post ID inside of here and what this will do is in the end we can just return uh await res. Json perfect now obviously we're not displaying just the post ID now what we can grab from this is we can grab uh the whole post now if we look at the data here from this API we have a title and we have a body let's show the title first uh so we'll say title and we'll say loader data. title and then let's show the body and we'll say loader data. body now you should see that if we go to the Post route and we put a specific post like post six it will say requested page cannot be found and that's probably because we were playing around with the with the routing definitions let me see where the yeah it's instead of Pedro I'm sorry but yeah so if you want to access this we just have to come over here and say Pedro slost sl6 and you'll see that it will recognize it will get the PM from this route the 6 one and it will make the API request put the title and put the body so we have the exact information this isn't the the sixth one this is the sixth one so this seems like yeah the data is correct if we went to to two the data would also change so this is the basic example of how client loading works but if we wanted to uh load data from the server we could create a loader over here not a CL client loader and we don't have a server here to load data from but I'll just write some like generic code so you guys get an idea this will probably be where you would do something like const uh I don't know product is equal to a weight and then db. getproduct you know like where you would access your database and we'll say something like get product and then pass the PM uh. ID and then you would return the product in the end this is just an example we don't have any products or any deep database but if you were actually loading data from the server this is where you would do it and keep in mind you can also have a client loader and a loader in the same component now this is the example for loading data but what about the action here let me just delete this uh for now uh what about this action thing over here well this action is for mutating data it will handle both uh a post request a put request or a delete request after an action completes all the data on the page is automatically revalidated so your UI will always stay in sync similar to the loader and the client loader there's a client action and an action the client action will run in the browser only whilst the action will also run on the server and is removed from the client bundles so for this example that we have over here let's actually change this to a client action because what we're going to be testing is a post request to delete a a specific post right uh or delete request actually not a post request so how do we do this well the first thing we need is we need somewhere in our component to display a sort of form that is going to allow us to execute an action now the great thing is that react router provides us with this form component which we can very easily use we have to only Define a method over here and I'll Define it as a delete method because uh we're going to actually simulate deleting this post this API over here I use it in a lot of my videos it won't actually delete this from their data because they wouldn't just allow me to delete their data but it will simulate a delete request and we'll be able to see it in our Network request over here when that happens so we'll have a form with the method of delete then inside of here we'll just have a button uh and we'll say delete over here and we'll give a type to it of submit so we can submit the form now all we have to do is we would have to come over here to our client action and we would need to access the specific ID from the post to actually delete it so we're going to use the same arguments over here in our client action so we can get the post ID for this specific post then what we're going to do is we're going to first uh then what we're going to do is we're just going to await uh Fetch and then we'll put the uh same link as this one over here but inside instead of actually uh having it as a fetch request oh I have to actually I'll just say perm. post ID instead of creating a separate variable but then we also have to put a method over here uh actually let's make this into our object we'll put a method and we'll just uh say method is equal to delete so we're making a delete request to this API endpoint now we want to uh just test this out we'll save this and we'll come over here you see we have the delete button let's open up our Network tab over here let's refresh this you see that when we refresh we get this um API response here which is the data that we're getting right for the specific post um and you can see that it's coming it's it's a get request coming from the Json placeholder API that we're using if I click on the delete button two requests happen the first one is the also to the same API but it returns nothing in the back because that's how the delete uh API endpoint works it will delete so it successfully deleted this it didn't give us any errors uh and it didn't return anything because there's nothing to return but uh it also fetches back the the data because like I said uh after an action is completed all the data in the page is automatically revalidated so that the UI will stay in sync with the data so it fatch the data so that if this was actually a deleted uh thing that we were showing it would actually show the deleted data but obviously the API won't delete this data so that's why it's still showing uh for Simplicity reasons if we want to do something a little bit more cool like redirecting us to the main page we could do it using the redirect function from react router it's as simple as just literally calling redirect and then putting this thing over here and you'll see that now if I click on delete it will redirect us to the main page great now there's a different way you can actually submit data using a form and the way you do that is by using the fetcher farm and the way you do that is by calling your actions using a fetcher now why would you want to do that well because there are a couple differences between calling your action using the form component from uh from react B over here and using the fetcher uh which is also something that comes from react router the first difference is that if you're using a form you're going to have like a normal form whenever you submit that form it will T trigger a navigation and if it's a method equals to post form the current Pages route action is called and then the route navigates to the resulting route after the action completes adding a new entry to the browser history now if you were to use this other method which is the fetcher form uh it does not cause a full navigation or adds anything to the browser history instead it will just submit the form data to the specific routes action and updates only relevant data in the UI making it completely ideal for up updating data in line without changing the URL or breaking the user browsing flow so in my opinion in this case over here we would probably want to do like use the uh the normal form because um we're going to end up in a different page anyway so it is possible that the updated version of the current page after submitting uh will follow a normal navigation pattern however if for some reason we don't want to actually return this redirect we want to return actually a thing saying was deleted or actually say is deleted is equal to True let's make it such that we'll try catch this we'll try this fetching functionality and we'll catch it actually I need to put the catch and what I want to do is if oh I need to put the parenthesis or this curly braces here so if uh there was a success in our fetching we want to return this we want to return saying that it was actually deleted but if there wasn't we return this the variable saying was false and we also put uh it like this perfectly oh we'll change this to false so we're returning some information that we want to display in our current uh component instead of redirect acting to a different page well in this case it would be perfect for us to use the fetcher form which is a different method of serving an action so how would we do this well we would change this to instead of using a form we would actually at the top here we would call the use fetcher hook and create a fetcher instance so we'll say use fetcher and then we'll replace this form with a fetcher form and this as well now most of the rest stays the same but the difference is that now we can access this is deleted over here by using the fetcher so let's create a variable called is deleted and let's set it equal to fetcher uh dot data do is deleted so this will allow us to access uh whatever is returned from this uh without having to use the action data which by the way if we were using the form and we wanted action data we could use it like that but we use the the the factor here and in this example let's just wrap this around with uh some curly braces and also with a fragment so that we can basically say that if the data is not deleted then we'll show this uh but if it is deleted we'll remove it so let's test this out um so this is the data right uh we'll check the in the network request over here we'll see that when I click delete it should fetch the data and it should hide this and this is exactly what happens because the request uh happened the delete request here happened uh even though we fetched the data and worked this is deleted while it's populated and we are able to uh conditionally render this now one thing I also noticed that I did wrong uh it was just this uh this isn't supposed to be a loader ARG uh it technically works the same but semantically we should make this into a client action ARG uh not a loader ARG so there are different types for depending on which uh function you're using and obviously like I said this doesn't change anything because both of them will have access to the post ID but you should use the correct types now the next thing I want to teach you guys is uh building on the example that we dealt with with using the redirect function to move us to the uh main page whenever we deleted and uh a post uh there's different ways you can navigate using react router 7 now obviously we already went through the redirect but that redirect function only works there we can't actually like if I if I were to have a button here let's just create a a button and say redirect um and we unclick this button and we call the redirect function here you'll see that that doesn't work uh if I try to click on that oh I'm in the wrong page actually let's go back here so if I try to click on that it won't work now the reason why it won't work is because this redirect function is only meant to work and navigate whenever you are in the loader or in the action functions so it doesn't work in your component if you want to navigate to a a specific route in your component if you're used to react router you might know that you can use the uh use navigate hook and create a a function called navigate and just call just call the use navigate hook and change this redirect to navigate and you should see that now if I click on that it will actually navigate so that's one other way of redirecting and navigating in your project now obviously there's the most obvious one which is creating a link and a link in react router is pretty simple uh we can use the link component over here this is just a simple hyperlink we can say something like uh about and put the link to the about route which I believe is also Pedro slab yeah so we'll say two over here and I have to import this sorry let's just import and we can go to the slash page row slab route and you should see that if I go to about it will go to the about page right that's another method of navigating now the final method is the NV link and a n link is a bit similar to the link but a bit different as well so let's import this from react rer as well and change this end over here now this nav link specifically is a component meant for navigation links that need to render active and pending States so it will be more useful if we change this from here and put it in for example the root right because or or somewhere else where we would have a Navar it's meant for having uh for being used for example in a naor so I'll put it up here let's create a little div uh and then just call it something like uh Navar and then let's put the nav link inside of here we have to obviously imported and we can make other links as well let's make one to the uh the the finances route let's see how we get there because I already forgot uh it's in the dashboard slash actually it's not in the dashboard cuz that's this is a layout so it's in the finances routes just that so let's change this to finances and let's change this to finances and by default you should see that if we this now appears or should appear in every single route that we have right so it appears on the Home Route it appears on the about route uh in the Pedro slab route it appears on the personal info route it's always at the top up as if it was an actual um Navar right now it does work normally as well if I click on this it will work similar to the normal uh link component but it also has some cool CSS styling that you can work with so for example uh let's do it all directly here in the when you set up a a style for example or you can do this for a class name as well or for children's of this nav link you can do it for all of them it allows you to have a call back back now what is that call back now this is a function that is going to return an object obviously because we need to return the style and it allows us to access information like if this is active if it is pending or if it is transitioning now with this information we could for example set it such that the I don't know the the the color of this link is red if it is pending and it's black or white actually let's make it in this case if it is not pending so let's say callor if it's pending is red but if it's not it is actually let's make it blue so you'll see wait why is this uh giving us an error oh yeah I just realized sorry about that we have to destructure this uh from the from the argument to have access to them but yeah so now you'll see that by default it's not pending when we click C on this so it'll be blue but for a brief second when I press on it it would be red and we obviously can't see it because the navigation is super fast but uh that's kind of the the way you could change this uh a good example as well is actually instead of using is pending let's do um an is active you'll see that and let's do the same thing actually for the for this nav link as well so you guys can see it's great because we are in the finances page so this is the active link so whenever the we are active it will show red but whenever the link is not active it will show Blue so this is a better example for you guys to understand we are in the finances page so the finances link is red and the about is blue but if I go to this one it will switch so it's a Nifty way for you to actually do some custom CSS styling you can put use the is transitioning as well if you want to I personally don't use this I'm going to be completely honest because I don't ever I don't think I've ever needed to do something like this but uh a lot of people who are more CSS more styling uh based they definitely Eno will enjoy this and it's a good way for you to style your website as well now the last thing I want to talk about is the idea of pending UI which is very common in whenever you're fetching data or in every single part of your website which might deal with uh some time delays now the most basic uh example would be with routing if if the routing is taking a bit we might want to show a little text showing that it is pending so a way we could do that very easily is by using the um use navigate or the use navigation hook let's do this on the post similar to this one over here and let's go to the uh post six actually let's go to post three oh actually yeah it's it has to be again ped uh perfect okay so we have this post right and while it is navigating we'll want to see if that is the case if it's still navigating so we can use the use navigation hook it will give us access to this navigation variable which contains information about the navigation history including for example if it is navigating or not and we can just get the navigation. location and we can turn this into a Buon and it will represent the true a true or false statement if it is navigating or not and if it is we'll just say if is navigation then or if it's navigating sorry let's actually make it navigating uh then if it's true let's just return a a p tag saying navigating I find it really hard to know if if this will actually show any UI for us because yeah it does because it's very instant right let me actually add also a a nav link for the this specific post or I'll just add a link whatever I'll just come here let's add a link for this specific post post six and then we'll say two and we have to import link and we'll say two uh SL Pedro slost slash6 we'll see that if I go to post six for a brief second it shows that it is loading because that brief second is when we are navigating so you see this is a great pending UI you might want to have in your app obviously don't put just navigating cuz what even is that you want to probably put like a spinner or something like that uh and you would do something similar if you are fetching data or doing some sort of action or submitting data so let's see how we can deal with that UI so how would we deal with uh setting a loading state for for example this delete button over here now we can use the fetcher that we already have over here and it already act gives us access to some pieces of information like for example the data but we could get um another piece of information such as is deleting uh by accessing the fetcher do state and if the state is not equal to idle then it is deleting and if it is uh equal to idle it means that it has finished executing so we could do something like this uh if is deleting is um true then let's just return actually I'll put it inside of here right makes more more sense so I'll put it below this and say uh is deleting is true then I want to put a P tag that will say something like uh deleting post Three Dots and then actually I'll just make it one case so what you'll see is that now in the in this post if I click on this for a brief second it will say deleting post and then will delete it and I could obviously go back to the main page I can do all of that so this is the idea behind uh getting a pending UI for when you're submitting a form and this is basically it for this deep dive on the new react router version 7 framework uh I personally think this is amazing uh I I've been loving uh remix recently and I think that this version of it combines a lot of the cool things from react router from a lot of the cool things from remix now one of the problems with uh react router is that they do change a lot every release they completely change a lot of things which is kind of annoying but also I feel like we are migrating more into remix with as time progresses I'm seeing an upward train in people using remix instead of nextjs for example so I definitely think that there's potential and there's a lot of value in you starting to use remakes in your own applications if you want to check check out the code for the tutorial together with a step-by-step explanation of everything I've taught uh I'll put a link in the description to a post uh an article on it that I'm that I wrote if you want to check that out go to my website pedot tech.co also the code for this video is going to be in the description if you enjoyed it please leave a like down below and comment what you want to see next subscribe cuz I'm posting two to three times a week and I would massively appreciate if you could support the channel and yeah that's that's basically it really hope you guys enjoyed it and I see you guys next time [Music] is [Music]