??? Visit Chris @ Coding in Public for more of his tutorials:
https://www.youtube.com/c/codinginpublic
???Get early access to his entire course now on Net Ninja Pro:
https://netninja.dev/p/budgeting-app-with-react-router
??? Access the course files on GitHub:
https://github.com/coding-in-public/react-router-budget-app
??? Live demo of the finished app:
https://codinginpublic.dev/projects/react-router-budget-app/
??? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
??? React Router docs –
??? VS Code –
All right hopefully you got everything Up and running I've got vs code open on The left here you can see I've got my App.jsx file open and then I've got the Local terminal set to npm run Dev so That it's showing over here in Chrome In this very first video we're going to Talk about the basics of reactor out or Dom and hopefully this again is a Refresher this course is meant to be More of a practice of hopefully what you Already learned in Sean's earlier course And any knowledge you already have about React router dump we are going to be Using kind of a newer version 6.8 is the One we're using in this tutorial series But anything 6.4 and above should have Access to kind of the main components We're talking about today now just like Any react app you can see here that I've Got this app being injected down here And this is what we're going to be Returning right here so here's where We're actually going to do all of our Routing in the app component you could Also do it in the main.jsx file if you'd Like to but I think it's cleaner just to Do it here now like I mentioned we're Going to be using some newer features And one of those is called create Browser router now what this does is Enable things like as you can see here Loaders actions and Fetchers we're going To be using all of those in this series
It allows you to basically pass in and Then receive data from your actual route Itself and so there's just kind of some Nice use case things where react router Down kind of takes care of a lot of the Heavy lifting for you and you can just Focus on writing JavaScript all right or Writing your jsx so we're going to start With create browser router and you can See that I need to import it and Assuming that you followed the Instructions last time you've got react Router Dom installed you should be set To go here so I'm going to grab both of These and then you see that we can Define a router and I'll go ahead and Just copy this out right here and let's Just paste it in up top I will just use Theirs as an example to start with and Then we need to pass down browser router Right inside here if you want to see These docs I will have a link in the Description to their docs you just need To find create browser router and it Should be pretty easy to find where at The top of that page so here what we've Done is Define a basic route path and We've passed it to the the route Provider down here now you can see that We've got elements and loaders and all This stuff now we don't have any of this So we should probably just scrap all This but at least we've got the Bare Basics now I should mention that in
Addition to Kind of setting this out as an object You can also pass in elements instead if You'd prefer that so if I open this up Underneath utilities you can see create Routes from elements so basically you Would just pass this in first and then If you'd rather not Define it as an Object over here you'd rather just pass In the elements you can do it that way Too so either way you just have to use Create routes from elements if you Decide to do it that way if you're Wondering what the difference of those Two would look like here's what it looks Like with elements here's what it looks Like the way we're going to do it with An object so either way just whatever You prefer but just you know you do have Another option let me come back up top Here to create browser router just in Case we need that again but then let's Jump over here and let me go ahead and Clear out this loader and for now for This element let's just pass in some jsx We'll say like hi or something like that All right let me go ahead and save this And here you can see at the base of our Site we're passing in this element or This jsx which is just High all right so That's why I'm getting it right here now That means if I come in here and I just Copy this down we change this to Something like about and I change this
To about and I save it then if I were to Come up here and manually come over to About you can see it says about now at This point now of course we're going to Run into some things like if I typed in Something that doesn't exist now I get This ugly UI here that basically Shouldn't be seen by an end user just by Me as the developer so we'll handle that In a second too but that's the basics of Just how to set up these routes you have A path that tells it where to look at Then you have an element that you pass In that you want it to show so that's All you really would have to have using Great browser router however create Browser router gives us some extra Superpowers and it lets up US pass in a Few different things we have loaders we Also have actions We can also pass in error element and That basically would tell it what to do If it errors out so all these things are Options for us in this create browser Router this newer version of react Router Dom alright so with those Basics Out of the way let's go ahead and create Our very first route now what I want to Do is replace this jsx right here with An actual element so let's come over Here and I'm going to create a new file So inside here we're actually going to Do it in a new Pages directory and in vs Code if you just do pages in a forward
Slash it'll create the folder for you And let's call this Dashboard.jsx all right so we've got a Pages directory and now dashboard.jsx Now to kind of Temple this out quickly I'm just going to use a snippet react Es7 Snippets I think is the extension And you can see here that I've got a Dashboard it's just returning the word Dashboard I'm going to go ahead and save That there that means I should be able To come over here and pull this in so What I want is dashboard actually like This dashboard and if I start to type You'll see it it should give you an Autocomplete and it should import right Up top here so what I can do is maybe Just come in here and say like let's Call routes Maybe And then I need to close this thing off And if I save it here we should see Dashboard so it's actually grabbing this Jsx inserting it here as the element That should show on this path now what We want to do next is actually look at The loader capability so react router Dom can say with any particular path When you hit that path I want you to Load this data and what we do is Define A function that tells react router Dom How to load that data on each individual Route and the way I prefer to do that is To do it in the same file and that's Kind of how their docs work as well
Although you can do this in any file you Want I just like keeping all the logic Together for each individual route so Why don't we come in here we're going to Create a loader function so let's just Do loader like that we need to export This so we can import it in our app.jsx File so function and then a lot of People call this loader and then just Rename it in the app.jsx file I prefer To kind of call it what it is so I don't Have to rename it there and it just kind Of keeps it cleaner for me so let's call This dashboard loader And this is just going to be a function That then hits some kind of endpoint Loads it and then passes it back all Right so what we're going to do is just Create a helper function and a helper File that then should allow us to use This on multiple different routes so Let's come over here and under SRC we're Going to create a new file called Helpers.js this file is going to hold Everything we need throughout our Application we'll just slowly be adding To it you probably want to break this Out in some way and write it in separate Files but we're just going to kind of Keep it simple what I'm going to do here Is just have a little note to myself That this is where all of my local Storage functions are because that's What we're going to be using in this
Series and I'm just going to paste this In not too hard to follow so you should Be able to type this out or you can grab It from the repo if you'd prefer you can See I've written it as an arrow function But it just fetches any data given a key In my local storage and returns it to me All right so that's what I'm going to be Using to fetch data for this dashboard Function as it loads so I should be able To pull that in by just coming in here And saying const we're going to first of All I'll load a user name so I'll say Username and we'll say this needs to Come from Fetch data and you can see Again I've got autocomplete it should Import it and I need to pass the key in This case I'm going to pass that user Name if that doesn't make sense I'll Explain it here in just a second but Let's first of all clean this up just a Touch and just say that these are going To be our helper functions All right now I need to actually return Out of this the data that I'm getting so I'll just say return in this case I Could just return username but I'm going To eventually add a couple things here So I'm going to return an object here And username will be one of the things In that object Again I'll explain this in a second but Let's first of all get this loader Actually up and running I'm going to
Come back over to my app.jsx file and The next thing I want to do is add a Loader like that and then I want to Actually pass it the function that's Loading things now what function is that Well that's my dashboard loader so if I Start to type dashboard loader you can See it actually comes in if not you can Manually type it just by adding this in As a name to export from the dashboard File and then I'm going to go ahead and Make sure I've added a comma here Because this is an object after all so What it's going to do is it's going to Load this immediately when I hit this Route so if I load this it should Actually have already loaded it and if I Pull this open I won't see anything Because I haven't had a display anywhere So once it loads how do you actually get The content that's been loaded down into The file itself let's come back over This way there's another helper helper Function and this one we don't have to Write this one comes from react router Dom and it's called the use loader data So that's how we're going to use the Data inside of here so if you start to Type use loader data you should actually Get this little prompt to import it from React or Adder done I'm going to move This up top here we'll just call this Like react router Dom Imports all right So use loader data allows us to access
Whatever is in this loader function Again the loader function can be in any File what really matters is right here Whatever is being passed in here this is What you're going to get back and this Use loader data function I should Mention this is a hook that's why it's Called use loader data and all we want To do is destructure our user name from The use loader data all right so we've Done a lot let me just kind of talk you Through it briefly here after we add Some stuff in the local storage since we Know we're going to be looking for a Username over here let's go ahead and Manually add that since we don't have it In the application obviously so we'll go Underneath the application and then Local storage and I just want to add a Key and a value so user name is what We're looking for and value I'll just Say like Chris all right so there we go We've got that set and ready now What's Happening Here is we're getting this Username from our function up here every Time we hit this route now I can Actually output this anywhere in the jsx So let's say like this this will say User name and you can see that I Automatically get Chris without doing Any more work so this this uh this hook Right here does all that work for me Coming in from my loader data function And every time I hit this route this
Loader will load and pass in any data so You don't have to worry as much about State and like passing things down back And forth if you're pulling from the Same basic source of data which you are In a lot of applications you can Basically just tell your loader function Here's what I need on this route and it Will get it for you and that's it that's All you've got to do super super helpful All right so just to make sure that Makes sense let's go ahead and walk Through that one more time if I come Over here to my app.jsx file what I'm Saying is that this individual path Here's the element I want to show that Element is right here all right now when I hit that route I want you to load this Data the data comes from this function Which I happen to have written in the Same file which is kind of standard Practice but you could do this anywhere And this function right here fetches Data using our helper function and then Returns it in an object object I'm Getting that down into my actual file by Using a custom hook that's provided by React router Dom called use loader data That's going to pull in here this Username and then I'm displaying that Username by adding it directly to my jsx All right well hopefully that made sense What I want to do next is create a Simple error route so let's come over
Here and I think just inside this Pages Director let's create another file we'll Call this error.jsx And once again I'm going to template This out using es7 react Snippets and You can see I've just got error Displaying right here and right like That now what I want to do is just use This function right here anytime I Happen to hit an error so that way if I Go to a route that doesn't exist and I'm Going to actually remove this one Because we're not going to have it about Route then it will display my error Message instead of that ugly thing we Got to start with There are a couple different ways to Display these error messages but what I'm going to do is actually have an Error element that I say Hey whenever There's an error show this element Instead I do need a comma here once Again and I just want to pull in my Error and if I start to type I should See it up top there if I start to type I Should see it but I'm not so let me just Go ahead and manually import it so we'll Just copy this down change this out to Error And I don't need any of this And in my pages I should have an error Element okay so if I save it here if I Were to go to a route that doesn't exist Now like this I should now just get
Error which is my own custom message now Obviously we're going to want to do more With that in the future so we'll get Around to that in a later video but just That's kind of the basics of how you Display an error because this is on the Root path anything that I go to match That doesn't exist this error element Will be triggered and it will show Instead now I mentioned there's another Way to do it and that is you could come Down here if you want and you could say For my path anything at the very end of My tree that doesn't exist go ahead and Show the element and the element I want You to show is error and that should Work the exact same way just make sure You put any actual routes that exist Right here so that this is only Triggered if nothing else matches it so In other words if I were to come over Here let's delete this right here and I Just go to a different route like this It should still show me my error element Because it says hey I can't find Anything that matches this right here so I'll just show this final path because It says anything that exists that's not Listed out show this element I just Prefer to kind of keep it together with The routes and you can actually do some Cool stuff when it comes to Children Where you could basically show an error Message for any sub route in a section
Of your application so we'll be doing That as we move throughout the Application but this is the bare bone Basics at the root directory if you ever Find any error go ahead and just show This error element and that's where We're going to start so in this video we Learned the basics of creating routes Including passing in elements for Different paths actually loading data at Each individual path and using error Elements in the next video we're going To talk about another superpower of this New react router Dom which is actions
