React Router V6.4+ Tutorial - New Syntax, useLoaderData...

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to be going over the new changes that has come with the new version of react water not so a couple months ago uh reactor Dom release version 6.4 it's actually a version 6.6 now however 6.4 brought a lot of new changes and I've made a video in the past going over the changes for version 6 of react to other Dom um but now there's also a lot of new additions which I didn't find actually a lot of resources online uh when trying to make this video uh so I thought it would be a good idea to explain it to you guys uh what are some of the cool things that are now possible using the library if you want to check out the code the code will be all in the description if you also want to check out my version 6 video which I go over everything and the new version of reactor Dom I'll leave the link for that in the description but for now let's get into the tutorial [Music] [Applause] [Music] [Applause] as many of you might know skillshare is an online learning community with thousands of inspiring classes for anyone who loves learning they have courses on a multitude of topics such as react typescript node.js and much more a course that I took and I really liked was the modern CSS writing better cleaner more scalable code course by Harry Roberts Cesars is definitely one of my weak points in web development and this course helped me find a better approach to learning the technology one of the best aspects of skillshare is that it is curated specifically for learning meaning that there are no ads and they're always launching new premium classes so that you can stay focused and learn as many skills as you desire in 2022 the first a thousand of my subscribers that click the link in the description will get a month free trial of skillshare so you can start exploring your creativity today okay guys so in order to show you guys the project I'm gonna be using this online erect compiler over here it has a very very simple uh piece of react code as you can see over here it's just a project already generated and what we need is to install a reactor Dom into our projects with version 6.4 and above so in our case over here we have version 6.6.1 because it is the latest one however depending on when you're watching this video it might change it doesn't matter as long as it is above 6.4 so the main changes that come with this update is related to data fetching in react so um I really like talking about this topic because it is often misunderstood especially by beginners and there's a lot of good Alternatives out there that people simply don't know so uh react order Dom implemented an easy way for you to reduce the amount of code you're writing similar to different syntaxes such as the ones you find in the next.js project or when you're using an external data fetching Library so I'll explain it better when we get to that point however it is important to understand that a lot of the new features with react order Dom version 6.4 requires you to make a little bit of a change in how you define your routes in react so let's start defining some routes in this project just as an example so I already have over here three different pages that we're going to use as routes in our project I have one called Contact one called data and one called home they're just examples as of right now all they display is just a simple header tag uh displaying the name of the page however they're going to be the routes for our project so over here at the top what I want to do is I want to import some stuff from react router done uh and what I want to tell you guys is that the way you define your routes will change because now we use something called the create browser router I believe this uh create browser router function already existed before 6.4 however I think it is required uh to use it if you want to use the features that I'm going to show in this video now what is the difference well the only difference is that before when you define the routes in react you would usually uh import something like browser router uh impart some routes and then just display them as a component tree over here in your return statement but now you define it as an object and it's not that different from what it used to be it's just a little bit of a syntax that is different so what you have to do is you have to Define a variable called router and set it equal to create browser router then you open then you open and close um parentheses like this and you put another thing inside of here um this is another function from rexwater gum called create routes from elements just like this and you define it right over here create routes from elements and you open and close parentheses again so there's this is a way for you to create your routes still using the component tree structure that you're probably familiar with if you've never seen it being created this way uh you can also create it using objects but I would rather do it this way because I feel like I'm used to doing it this way from the previous versions so I don't see the point of changing it to something different right now so what you also need to import is you still have to import the route uh path right the route component in react however you don't need to import the routes component that previously existed now you're just going to use the route because what you're going to do is you're going to put a route over here just like this and you're going to Encompass a lot of stuff with this route and this route is going to be called the the root of your routing system it's going to have a path of an empty slash because it's the like the initial page and the element that you're going to put over here is a component which you're going to call the root component now the root component I'm actually going to create it uh down here um just like this const root and this component is actually not that complicated uh its whole purpose is to structure everything related to your routing that isn't defining routes so it would be for example somewhere to put your navigation your navbar system right so uh over here at the bottom we're going to return and we're going to return some empty some fragments in react and in here we're going to put two things we're going to put first our navbar if we want to have a network in our application right and the network I'm going to put is going to be simple it's just going to have a couple links and for links in reactor auditon you'll still use the link component I'm just going to put the links to uh page actually I'm going to put the link for two pages because I don't want to over complicate this tutorial uh and I'm going to put over here home so a link for the home page and a link for the um the data page because the contact page exists just as an example we don't need to have it being displayed so we have both links over here we're going to um simply put a two property over here which is common in links in reactor Dom and we're going to put the link for each of those pages just like this so now we have our uh our navbore but we also want to put uh an outlet and if you don't know what an outlet is basically uh you can watch my video on um on nested routes in reactor to Dom it's not that important to understand it's just important to understand that this is how you're going to display the other Pages uh the other routes inside of your root um root component or root route so we're just going to put over here a div or wherever you want to put uh and we're going to put an outlet so all of our other routes will be displayed or be replaced by this Outlet so this Outlet is just a placeholder for all your other routes and they will all exist inside of here so every page in your component in your project will be a navbore and inside of it it will be the other route that is supposed to be to be displayed so now we've made our root component and it's being perfectly displayed over here so what do we do now we're going to come over here and we can start defining our actual Pages uh so one thing I think a lot of people might be confused with this is well we have our our home page right so why are we actually displaying the root and the empty slash or the the initial path of your url well no what we did over here is just defined the root which is a whole different concept from the home page or the initial your URL page to Define the initial URL page or the home page in our case we just put another route inside of this route wrapper that we created above and this one over here we just say that it is the index page so it's the first page just like this and we obviously need to put an element which is going to be the component being displayed and we're going to import it over here at the top we're going to say import from dot slash home.jsx and we're going to import the home component and just display it just like we would normally over here now we're doing the exact same thing with the other components so we'll do it with the contact and with the data just like this I'm also going to import both of them over here and be back in a second and now I just imported it as you can see and now we're basically done with it we also have to remove the index because I just copy and pasted the routes but only the home page should have the index prop over here now what we do is this is basically done this is how we're defining our routes in the new version but to set our application to actually display the routes because as of right now you can see that uh basically nothing is being displayed right I want to show you guys the actual browser and um the changes that we're making being appeared and I find this online compiler to be better for that use case so what do we do now we basically set up all of our routing but we are actually not seeing any routes right I'm in my URL over here I'm in the home page but none of the routes are being displayed so the difference now is that on react water Dom version um 6.4 and above when you want to make this kind of changes you actually put over here what is known as a router provider just like this it is a self-closing component that you need to import from a reactor done just like this and like any other providers it will take in over here a prop which is the router and you pass in the router that you created just like this and you'll see that if I refresh this it will now actually display correctly all of our routes you see over here uh we're in the home page and it just shows home if I go to data it should actually not work because we actually haven't defined the paths for data and contact over here so to define those paths we're just going to say slash data for data and same thing for the contact we're just going to put slash contact over here so now let's try let's refresh this uh if I am on data as we saw before it will actually show the data but if I go to home I'll be at home and we can easily switch through the routes so this is the first uh main change that you might see from recorded on version 6.4 it's just the way you define your routes but this is not really that important right it's just syntax so what exactly do I mean from what I said in the beginning that the new changes are very important in relation to data fetching in react well what react router Dom does now is it allows you to kind of align uh your navigation system with your data fetching what I mean by that is before if I wanted to have for example I created this data component over here and the whole purpose of it is because over here it's going to be a component that will be fetching some data and displaying that data in the screen so what I used to do or people used to do right to fetch this data in its most simple terms I'm not including using for example react query or use SWR or any other data fetching Library out there I'm just saying you know the most simple thing you can do to fetch data in react would be to import a use effect for example so I will come over here at the top and import um from react a use effect and then you just Define a user Factor over here and inside of this function you're probably fetch some data right I'm not going to write over here as of right now but you can picture I would fetch some data and then create a state over here right I'll probably create a state to represent that data something like const equals to use State and I don't know call it data and and set data and then I would handle everything from the loading state to the data State and also to the to the error state right so there's usually three different states that you might want to take care of when you're fetching data in react but all of this would obviously take on a lot of code and you can bypass this by doing stuff like um creating hooks to representative reuse right to fetch data and reuse without having to write all of this inside of each component but the problem here that reactor or Dom is solving is not only the abstraction of your code it is also the fact that when you fetch the data on a user fact it will wait for the it will obviously you will navigate to the page then it will try to render everything and on the first render then it would fetch the data and then replace your state with the data that you receive from the API which would then trigger a re-render of your component to then display the data that you're fetching so there's a lot of steps in between displaying your page displaying the route and rendering the route and actually receiving the data so what react order Dom does now is it allows with something called a loader to actually start fetching the data before when you start navigating through your url meaning that when you actually get to the URL or the route you will actually have the data already done for you to use so how exactly would this work well I'm actually going to use an example sample API over here that is public if you guys want to use the API as well just to test it out you guys can do it as well so in our case I chose over here a simple API which I've used a bunch of times my videos is an API that when you request it it will actually return a simple Json with a URL to an image of a dog so it's just simple stupid but also simple to use and that's why I chose it so we're going to grab this URL and over here inside of our uh component instead of fetching the data in between the component definition over here we're actually going to create a function and we can call it a data loader something like this uh and what this is is the function that is going to make the fetching for this component so here this function can actually be asynchronous which is important to understand because uh it facilitates a lot for our fetching needs and in this function what we want to do is we want to fetch the data I'm going to use uh the simple fetch API right I'm going to grab the response and say fetch and I'm going to use a async or weight instead of dot then and Dot catch so if you want to use that syntax you can use it as well but I'm going to use async await I'm going to say fetch and then put over here the link or the URL to the API then after we fetch this we're going to grab the information back and we're going to get the dog from awaiting the actual response.json so simple fetching in react right and then when we return back we have to return something in this function which is the data that we want to have access to in this component so what we're doing here is we know that this component will need some data from a dog right in this case it would be the URL to an image of a dog we know that this component its main purpose is to display this data so if it's so important for this component to have this data Rector Dom makes it so that it will load the data before you even get to render this component or before you even get to the the route of this component so this data loader will be ingrained inside of the definition of this component meaning that whatever you return over here will have act we will have access inside of here after we use a hook that exists in Rector Dom that I'll show you guys in a second but we have to make sure that we return over here the information that we need and in our case this dog will be be an object because we see over here it's what we get from the API it's a Json which obviously it when turned into JavaScript it becomes an object and it has two things it has the file size bytes which is just the size of the image but it also has the URL which is what we need so I'm just returning over here the dog.url now how do we grab this data right we fetched the data and it seems to so it looks good right but how do we get this well we have to first of all export this because now when we grab this back over here in the route definition for this component right this is the data component it actually requires a loader as well which is a a prop inside of here and what we pass through here is the data loader function that we imported from the data so over here we can grab as well the data loader function right because we are exporting it from this component and we'll grab this we'll put it over here and you can see there's no errors meaning that it accepted our function now what I want to do is I want to access this data but how exactly will we do that so to access this what we do is we come over here at the top and remember now we don't need to use a use effect or use state it simplifies a lot for us we actually import something from react router Dom which is a hook called use loader data and they use loader data is really simple because we know what the data the loader data is right it's whatever we returned over here so if we want to grab the URL all I have to say is dog URL equals to use loader data so this hook all it does is it's going to return whatever you pass in as the loader and in our case over here we want to display that image so I'm going to put over here an image tag with a source and the source will be the dog URL and we can test this out to see if it works it's not an H1 tag so I'm going to change this actually to a div instead of an H1 and let's go to the data route you see uh maybe it's loading it's loading a picture of a dog but you can see it is working um perfectly but the main point is that the way we approach this is completely different from how we would normally approach before this new change now I understand if you're a beginner this change might not be so significant as I I actually am saying it is but for your reference with this new changes it means basically that if we have a large application which includes a lot of routes and complicated uh nesting of routes and we have data that should be accessible for multiple different parts of that routing system and we have data that should be accessible through multiple parts of that routing system we now have all the data being able to be loaded in parallel which is extremely good for those specific use cases but one thing you might question still is uh I mentioned in the beginning that we don't need to create the state for loading for error for any of that anymore and it's all simplified into this piece of code over here but I'm actually not showing loading being displayed right any any display of the data being loaded actually when you refresh the page uh or you try to load the data it might even take a while and it doesn't show any UI feedback that the data is loading in my case over here I'm actually with really bad Wi-Fi this is why I'm using an online uh set up an online compiler over here because I don't have my my normal computer with me that's why I have to use the browser to do this tutorial but we still want to be able to see some sort of feedback over here right and the way we do this is by using another hook in reactor Dom which is a really cool hook called use navigation with this hook we can actually get a lot of information about the navigation in our app so if I say use navigation over here this variable will give us a lot of cool information for example if the state of the navigation is loading so how would I do something like that right well I want to display some sort of UI that is different if the data if we're still navigating now the reason why this is important with this change is because now we're loading the data and then navigating right before it would make sense to put a loading screen for while you're navigating because navigation would be almost instantly but now since we're fetching data beforehand we have to do something like this or also our users might wait forever with an empty UI because your data failed to load or something like that right so what I can ask is something like if navigation dot state is equal to loading then I want to display some sort of UI over here the UI I'm going to display or return is just a simple H1 tag saying that the data is loading right but you can put a spinner you can put whatever you want over here but you'll see that now if I refresh the data right if I refresh the page and I request a new image it will say loading for that Split Second that the image is is is obviously or the API request is being processed and then display the data and this is how you would do it through this now to finalize this tutorial I wanted to give my opinions on whether or not this will replace something like a data fetching library or uh any other type of alternative to using this kind of syntax I would say no it wouldn't I will still use react query which is obviously what I usually love using I've talked about it in the past a lot of times I do enjoy the syntax this reminds me a lot of for example next JS and I will indeed use something like this because I like the idea that react router is proposing in this new update so the reason also I wanted to to make this video is because I didn't make an update to my through that video and it's been three months and a lot of people don't actually know about the new changes in react router so for that reason I wanted to make this video before we end the video I wanted to thank skillshare for sponsoring this video I also wanted to uh wish all of you guys a happy holidays depending if you guys celebrate Christmas or not it doesn't matter I wanted to wish you guys a happy end of the year as well I really appreciate all the support you guys gave me this year I wish I could have ended my my last video of the year with a better setup than what I have over here but it's fine I'm not in my house I'm not home anymore I'm visiting my family and for that reason I had to make some adjustments but yeah I really wanted to thank you guys really hope you guys have a good year next year and yeah that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] [Applause] thank you [Music]

Channel: PedroTech

Views: 89,997

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, React router, React router v6, React router dom, React router tutorial, React router dom tutorial, React query

Id: z0vaVoxMoSA

Length: 24min 55sec (1495 seconds)

Published: Fri Dec 30 2022