??? 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 welcome to lesson three we're Going to create a wrapper in this video That should kind of contain all the sub Children in our application so the way We're going to do that is to open up the Sidebar here you might remember that We've got a dashboard as our kind of Base route what I want to do is replace This with a main layout and the easiest Thing to do to kind of keep this Organized is to create a new folder We'll call it layouts and then inside Here we'll have a Main.jsx all right so it created a Folder here and then main.jsx what I'm Going to do is actually start by just Copying over all this dashboard right Here and dropping this in we need to Change around a few things though so I'm Going to change this to main loader and Then this this and this hitting command D gives me access to all those at the Same time we'll just change this to main So we're going to be exporting a main Function here that'll use a lot of the Same things we've already been playing Around with and what I want to do is add One more thing to that and that is to Come over here we're going to add Something called an outlet so if I start To type here Outlet like this you should See reactor router down hold this in if I click or hit enter it should import That up top so right here outlet from
React router Dom and now I'm going to Display out here on the page so this is Like a slot if you've used other Frameworks that use the concept of a Slot where you're basically saying any Children that I'm going to pass down I Want you to drop right here in this Outlet component so that's what we're Going to do and what we're going to do Is come back over here to the app.jsx Let me close this down and for now I'm Just going to go ahead and copy this Down and replace the dashboard here with Our main layout if I start to type it Should Auto Import it and it looks like It does let's go ahead and just add this As layouts it's going to be the only one We use but that's all right now for now Let's just go ahead and change this to Main loader so main loader And that pulls that in right up here Error element that's just fine what I Want to do now is though is pass in some Children and you can do that by passing In children like this and then this Needs to be an array of items and the Items we're passing in are the same kind Of things we've already been doing so It's actually this object right here We're going to pass in so what I'm Saying is when I hit this base route I Want this element my main to kind of be The thing that you show load whatever Data is here there's error show here and
Then any children that should be Displayed in that outlet are going to be Passed inside of this array and the First thing I want is my dashboard to be The first child and that's going to be At the base path all right which is the Same as whatever the base path of the Site is now there's another way to do This down here you could say index Equals true so it's basically saying at The index of this path go ahead and show It this element all right when I save it There you can see it's actually showing Me that and I'm getting a double crisp Because both the main and the dashboard Show that so let me come over to the Main over this way and let's go ahead And just get rid of the this and let's Change this to say something like main Just to show you exactly what's going on And then I'll copy down and put it below The outlet so you can see I've got my Main up here this is all the dashboard Content and then my main over here so It's just wrapping whatever I pass into This Outlet so if I were to change this Around let's say I came back over here And let's comment this out and this out And instead of the dashboard here I had Like an H2 that said like yo all right Or something like that now you can see Yo is in the middle of Main and Main Alright so let's change that back so That outlet is basically just dropping
In whatever children match the kind of Sub route that I give it of course that Means if I were to come down here and Add another child and again we'd say Something like path and let's say about In fact you don't need that forward Slash you can just say about like that And it will add that for you and I pass In an element here so I'll add a Paragraph tag and this will just say About now if I were to come over here And go to the about route you can see That now about is inside of those so It's just going to take whatever Children match its sub route and go from There now what happens if I pass in Something that doesn't match anything Well I'm going to get my error element Right up here so for now let's go ahead And leave that dashboard alone I do want To come over here to the main though and Add couple of different things the first Thing I want to do is surround this Outlet with main tags itself and that Way this is kind of the main content is Inside here up top here we're going to Have a nav bar which we'll do in a Second and down below I just want to Have an image that's kind of going to be Like a decorative footer so this will be An image tag we're going to point it to An asset that we will import now if you Followed the instructions earlier you Should already have these in your assets
Folder so we'll just say assets import And what we want is wave from go up Level to assets and then we've got a Wave.svg All right and then I want to use this Wave right here as the the name of this Image Now by passing in an ALT with nothing This should basically hide it from Screen readers because it's just Decorative it they don't need to know There's a green bar at the bottom The other thing I want to do is add a Class here so class name this will be Called a layout and that will style this Properly to where this will always be on The bottom our nav will be up top and All the rest will fill the middle Section then the final thing we need to Do is to actually add a new element here Called nav and that's what we're going To build out now So let's create another folder and we'll Call it components and inside here we're Going to have nav.jsx so any components We might use on multiple Pages I'm going To do here you can do this however you Want to structure it but that's how I'm Going to do it so right here we're going To return a nav just like this this will Actually be inside of nav tags so let's Come back over here and import that Right here so I'll start to type nav and Hopefully it gives that to me yeah there
We go So this nav here should pull in let's See where did it put it right here let's Go ahead and just add this as like Components this keeps everything nice And organized we've got react router Dom Our assets components helper functions Our loader function and all this is Displaying properly now this nav right Here I actually want to get access to Whatever my username happens to be so I'm going to pass this in as a prop Username equals username so I'm getting This from the actual route itself and Then passing it down to a component That means if I come over here I should Be able to de-structure here user name Like this and then I could display it Here if I wanted to user name it should Display Chris instead of nav All right so what I want to do now is in This nav bar just do a couple things for Styling and then also talk a little bit About actions now to start with let's Come up here and we're going to import Another asset so we'll say assets and Import logo mark from we're going to go To the same location our assets folder Inside our assets we should have a logo Mark dot SVG And I want to add that in right here as An image and the source here should be Logo mark I'm going to actually give this a height
Of 30. and that way it kind of loads at A right size all right so there we go We've got our logo Mark showing but I Actually want this to be clickable so it Will always take me back to the home Page now you might be tempted to add Like an anchor link or something like That but with a reactor out or Dom you Actually want to use the different Components they give you because they Will control the routing and then you're Not reloading stuff you don't need to Reload so if I come over here I'm just Going to import a nav link like that From react router Dom it should show up Right here let's go ahead again and say Like react router Dom Imports And this nav link is going to have a Starting tag and it will have a closing Tag now you can also use Link the Differences with nav link it actually Will set the link to like Aria current Page so that you know which link item Which nav item is for that current page I'm going to drop back in my image Inside of here and then also set up a Span that says like home budget This home budget is the name of the Application so that's what I've got it Passed in here now for the nav link you Actually need to tell it where to point Just like you would like with an href Except you're going to use the to Property and I just want it to always
Point to my root directory and then Because this isn't super descriptive Let's actually add in an aria label And this Aria label will simply say home Or how about go to home something like That All right so now if I come over here and I go to click it should always take me To the home page now of course I'm Already there but if I were to go to Something else random that doesn't exist Well I guess we haven't handled that yet So let's let's not worry about that for Now for now basically no if you click Here it should take you to the home page Now you'll notice because react router Dom is handling this it doesn't do like A refresh of the page it actually just Handles it in the background so nothing Looks like it's changing but if I Actually was on that route it would take Me to the home page now you'll remember We're getting a username here and what I Want to do is conditionally show Something if I have a user name so just Like this we'll say username inside of Curly brackets and we'll just say if That exists then I want to go ahead and Show a form now this is one of the Things when you're using this new create Browser router that can kind of throw You off at first and that is we're kind Of going old school with the web and Using forms in a lot of different places
Because they can submit to different URLs and then react router Dom can load Things on those those routes or can run Actions on those routes so what we're Going to do is actually use a form but Not a our own form one from react router Dom and you can see if I start to type And I select this one right here I can Click or hit enter and it should pop it In up top here or you can just manually Type it now this form itself is Something that react router Dom will Handle and you can do a bunch of Different things in here to start with Though we want to pass it a method so Method here I want it to be a post Method so I can actually send it data And then you can pass it in action as Well this basically tells it what route To submit this form to and I'm going to Submit it to a route called log out now Before we do too much more let's Actually add a button inside of here now You might remember in HTML if you have a Button inside of a forum by default its Type is submit all right which is a Little funky but basically if you have a Button inside of a form it'll always Submit that form all right unless you Handle it in some way what I want to do Is actually add a couple classes to this Just to style it better so we'll say Button and then button warning this is Going to be a warning button for logging
Out We'll add a span here that says Something like delete user and then I I'm going to add an icon here in just a Second but for now let's go ahead and Just save this you can see I've got Delete user over here I can come click This and it should actually submit it Using the post method to this route Right here this logout route which we Haven't set up yet but if I click you See it now goes to log out so I'll go Back just so we can get back to the home Page but here we go this takes me home This takes me to the log out route by Submitting a form now because it's Submitting a form I can actually handle That in my application now I don't want People to be able to log out immediately I actually want them to kind of have a Check just to make sure that that's the Case and react router Dom lets you do That so you can have an on submit just Like you would in normal react except in This case I'm going to take my event and I'm going to basically pass it if Confirm and then I can pass it a message So in this case I'd say like delete user And all data And if that is the case then I will say Event Dot prevent default so what I'm checking On is saying hey I'm going to ask him This question if they say no that's what
This bang means then go ahead and Prevent the default don't submit the Form by default when you submit a form It refreshes the page or sends it to the Action or whatever so what I'm saying is Hey don't do that all right so let's Come back over here if I go back to the Home page I click now I should get this Little pop-up delete user and all data If I hit cancel now it should prevent The default however if I come over here And I click ok then it should send it to Logout All right let's do one more thing before We actually handle that in a log out Action I want to add an icon right here We're going to actually do it by Importing a library called hero icons This is made by the makers of Tailwind If I come over here to documentation Let's see and scroll down I should be Able to just install it right here so Let's grab this I'm going to open up my Local terminal and kill it for a second And Install hero icons react As you can see here what all we have to Do is import something and then actually Display it down below even though I'm Not using Tailwind it's just fine we're Going to use it because I like these Icons alright so let's close this down And then I'm going to go ahead and let's Add like I don't know Library Imports Something like that Library
And then we'll go ahead and add in not a Beaker icon but that was a good start We'll have a trash icon and all I have To do is add this down here as an Element And I'm going to give it a width of 20. So if I come back over here now I should Have a nice little trash icon and it Should change with the color based on The CSS that you imported at the Beginning of this series all right so How do we actually handle what happens When I go over here and click OK and it Hits this log out well that's where Actions come in on a react router dot so The very first thing I need to do is Actually set up something for that route Now we can set this up as a child route Everything would be a child route Technically of this we can set it as Kind of a main path as well since it's Already going to be off of the index Because it's technically a child route Like everything would be of the root Route let's go and just add it in this Children's array and I'm going to say Path and what I'm going to pass is log Out all right so this path log out Should be hit anytime I click that Delete user and I could do something Like element here and just be like a Paragraph of Logged out all right now we haven't done Anything with that yet but you can see
If I come over here and click OK I Should get logged out yeah there we go Okay so you see it's showing in right Here and it's actually showing in as a Child element of this main path because I've passed it in as one of its children If I were to put it on the outside of This so for instance down here below and We refresh this Oh and I need to move it one more down Sorry like that all right and I come Over here and I click log out you'll see Now it's kind of its own route and it's Not inside of that wrapper and I want it Inside the wrapper so let's go ahead and Just leave it like that Okay so now it says logged out click Here it should go back to the home page Just like we said earlier now I actually Don't want to display anything here all I want to do is log the user out and go Back to the main route so I don't need An element I actually just need an Action so when I hit this route do this Thing and that's what an action is for So I'll say action and then I need to Pass it some kind of function now I can Write this inline or I can import it I Can have it in a different file and just To kind of keep stuff clean that's what We're going to do so I'm going to have a Log out action now for now nothing is There so it should yell at us if I save This so let's come over here and we can
Do this in a couple different ways but Because this is simply an action I'm Going to come over here and add a new File so let's call this folder actions And then we'll call the file logout.js Now here I want to export an async Function we'll call this log out action And I want to do two things here I want To delete the user and then I want to Return a redirect so in other words as Soon as I hit this route do an action And then send me somewhere else so let's Start with that redirect so I'll return Redirect if I start to type here react Router down should import that up top And I want to redirect back to the home Page so for now let me save this I'll go Back to the app and then if I come back Over here to logout action I need to Actually import this so let's just call This something like actions we'll import Okay this will be log out action from Logout and auto imported that for me so Now if I come over here and click and I Click OK it should redirect me to this Home page so nothing visibly happens but It actually is going to log out the user And that's what I want now let's open Back up this nav.js file you'll remember That if there is no username it Shouldn't show this button anymore so Once we delete the username right here It should actually delete this which Will give us a visual indicator that
Something has happened the other thing That should happen is this no longer Display Chris because Chris won't be a User anymore since we've deleted it now Where are we going to write that Function well I'm going to do all those Kind of helper functions inside of our Helpers.js file so we'll say something Like delete user or delete item how About that because we're going to use This in a couple different other places We'll say export const delete item and Here I'm going to actually pass it in Object so I can pass in a couple of Things for now we're just going to pass In a key And I'll simply return local storage dot Remove item whatever the key happens to Be So we've got that set and ready let's go Come over here though and import that so That was delete item and here we go it Comes in up top here let's just add a Little import statement here like Helpers up top here this will be a react Right or Dom Imports And the item we wanted to delete is our User name And I need to actually set this inside Of an object like this so key is user Name now let me open up this app.js file And talk you through this again so when We click this button it should submit a Form to this route which will then run
This action this action I'm getting from The logout.js that I've exported created Here it will do two things it's going to Delete the user using our little helper Function and then it will redirect us to The home page that should get rid of This and get rid of this button okay you Want to test it out let's try so if I Hit cancel it shouldn't do anything if I Come over here and click OK here is the Moment of truth well that moment of Truth stunk because something messed up So let's see what's going on two hours Later oh so it was log out with a Lowercase rather than an uppercase which Is what I passed it come back over here And now we've already logged out and you Can see here it doesn't have any Matching element because it should Redirect although at this point the Action is already done so it can't all Right so if I were to come back in here And we were to add back in here a user Name and I said Chris And we refreshed it should show here if I click here it should Now log me out And redirect me to the dashboard all Right it's a little trouble there at the Very end just from the way we named that File all right hopefully you caught my Note in the video about just the Misspelling of log out there with a Capital l versus a lowercase L and if You got that right then it should have
Logged you out just like it did for me Here while it's nice that this app logs You out correctly it would be nice to Show the user some kind of UI to say hey We've successfully logged you out so We're going to do that in the next video
