Beautiful.
And once we're done with React router refresher to set up structure for all the pages.
Now there's going to be more nested pages, but I'm just thinking about the main pages of our application.
So we're talking about Arrow Register and Ash Board and Sam's dashboard will be nested.
There is going to be a little bit different set up later, but let's not worry about it right now.
So for now, what I want you to do is go to Pages Directory and then create error register and dashboard
pages with basic return.
Whatever you want our turn as default, whether that's heading one day or whatever.
Again, it doesn't really matter.
Then create in jazz, import all the pages that we have.
Remember, we still have landing there as well.
Export them one by one, basically, just like in the components that import them in U.S. and then add
them one by one to our elements.
So if the path is to an error page kind of makes sense that we provide the error page correct.
And then at the very end, you can remove the bar because we're not going to use it in the address.
So let me open up the sidebar.
We're looking for two pages and I'll write a way, create the index just as well.
So let's go here in the U.S., but I'm being we're not going to do anything here.
Let's create those pages.
So for now, I'll start with a dashboard.
Again, I'm using my snippets, so I'm going to go with underscore.
And then what I'm looking for is are a half c e I create my dashboard, Bing.
I'm going to change this around to a heading one just because it's easier to see on a small screen.
And I'll say dashboard or right away, I export with our export default.
So now it's doing the same thing for the error unregister register.
So we're going to go here with the registered yes again.
Same deal, same snippet and that same returns.
So we want we can actually copy and paste.
Maybe that's going to be faster.
I don't know.
I'm not sure.
So let me go here, copy and paste.
And now I just want to change it to a register, of course.
And let's do the same thing with our error.
So our page and then let's go here again.
Same component and now check my register for some reason complains I'm not sure why.
Maybe because there was a mess up here.
I don't have the closing bracket.
My apologies.
So it must save it properly here and now.
Of course, I don't have the proper syntax here.
OK.
Finally, let me grab this setting one.
And then back in the air, we just want to replace that, and it looks like copying pasting is definitely
not my thing today.
And then once all of this in place, remember now we want to one by one import them.
So we're looking for a dashboard and register all of them one by one, let's say dashboard here.
And what's also nifty that we can actually use your cursor here, like show violence, copy and paste,
and then we can just change the around the name because all of the march.
Now, if you prefer the.
Auto import, which is available in Visual Studio Code, of course, you can do that as well.
So and here you can go with landing.
You can also change it around to error.
The last one we're looking for.
Here's the register.
Alternatively, you can use the auto import.
That's really up to you.
And I'm going to spend one video kind of explaining where I stand on auto or importing while I'm recording,
but not for now.
I just focus on these things.
So I'm here.
I want to get a dashboard.
I want to get the landing page.
I want to also get the error page, and I want to go with a registered page.
I export all of them now from the index, just from the pages.
So this time everything's correct.
I'm back in the app.
Yes, I just start by removing a number.
Like I said, we won't need you just for now.
And I also don't need this link.
So let's remove this one, and let's set up our import.
And what are we looking for?
Well, I want to get the dashboard correct.
What else?
I want to get the register, then I want to get the landing in mind, the error.
Now, if you want again, you can technically just copy and paste.
So that's definitely going to be faster, especially if you have a bunch of files and you know that
you'll use all of them.
So this is the case where in an I know, I'll use all of these pages.
So again, you can copy and paste or in my case, I'm going to go with error.
And then from.
And what are we looking for?
Well, we just want to go for pages.
That's it.
That's all we have to do.
And not one by one.
While let's change them around where it's not going to be a div with the dashboard, it's actually going
to be a dashboard component.
Same goes for register.
And hopefully you see where I'm going with us.
So let me set up the register.
And then lastly, let me go with her.
So we're going to go here with error.
Let's say that one and we have landing has been already declared.
And of course, yeah, I left this import.
My apologies.
Let me say it.
And now everything is correct.
So this is going to be our register page.
But if I go to your home page, I should see the dashboard.
And then if I go to a landing, everything still works.
I can navigate the register and then if I go to a route that doesn't exist like, let's say, registered,
and once we navigate there, we should see the error page.
But I think that's what happens when you copy and paste.
Yep.
Of course I'm here.
I have the register should be error.
So let's set it up.
Now we have properly error, and with this in place now we have a proper structure for our main pages.