Okay.
And once we have all of the pages in place now let's set up index.js.
And first, let's see why we want to set up Index.js in the first place.
And in order to showcase that, first of all, I will clean my workspace.
So effectively I'll remove all of the tabs.
I find them quite annoying and I'll also collapse everything.
So I'll start from scratch.
I want to navigate to app JS and notice this import for home layout of course, in order to get those
pages to app JS And yes, eventually all of our pages are going to be rendered in here in this app.
JS Effectively we just want to copy and paste and of course it doesn't really matter which page you
use.
Let's say you go here with register.
Technically everything is correct.
You have this register page in the app.
But notice that pretty much for every page we'll need to add another line of import.
And a better approach is following where we navigate to the index JS inside of the pages one.
And from this file we right away export all of the pages.
So then where we want to use the pages in our case app.
JS We can just set them up as named imports and you'll see in a second what I'm talking about if some
of this sounds iffy.
And as a result we just have less lines of code.
And as a quick side note, we'll use the same setup for our components folder as well.
So let's get started.
We're going to navigate to Index.js and then the syntax is following.
We want to go with export.
Then we'll set up a default keyword.
We need to come up with a name.
So in my case it's going to be Dashboard.
And layout.
That's going to be the first one from.
And now we want to look for the dashboard layout page.
And again, same deal we want to repeat for all of the pages.
So let me first copy and paste because we'll just need to change the values around.
I'll probably add a few too many and then I'll just remove them.
So the second one is going to be a landing one.
And again, the logic is following.
We pretty much take everything that's coming from the landing and we export as landing and in our app.jsx
we'll use the named import and as a result we'll just have less lines of code.
So after landing, we have the home layout.
Home layout.
Then we have the register one.
After that we have the login one.
Then we want to go with.
After that, we have stats.
Then we want to set up the all jobs.
After that we want to go with Agile.
Then.
At a job.
Profile.
And admin.
Hopefully I'm not missing any pages.
If that's the case, then of course we'll just need to add extra code in the index.js.
So now I can remove these extra export statements.
I want to navigate back to the app JSX.
And instead of.
The import for every page.
We're just going to go with import.
Then we need to come up with the name and where is it coming from?
And now we just want to point to the pages.
So Index.js is going to be a main entry point, so we don't need to write specifically which file we're
looking for.
By default, Index.js is going to be the main entry point.
So in here we just need to provide which pages we want and we'll start with home layout, landing register,
login and dashboard layout as well as the error.
Again, eventually we'll have all of the pages.
But you know what?
For now, let's just grab home layout.
Then we want to get the landing one.
Then we want to get the register.
One the.
Log in one.
The dashboard layout one and also the error page as well.
And as a side note, let me just double check whether I created.
Yep.
I created the error page.
For some reason I thought that I missed that one.
And then where we have the router, essentially we just want to set up more pages and we'll change some
things around as well because there is actually no about Page.
This was just to showcase the basic router.
So we have a path forward slash that's going to be our home layout.
And then.
Right after that, let's set up the register login and dashboard.
Let's copy and paste three times as far as the route.
In this case, we're going to go with a register and in here we want to showcase the register page.
Then we have the login one.
And we'll look for the.
Login component or the login page.
And then we also have the dashboard.
And as far as the dashboard page, well, we have our dashboard layout component.
So now if we go to the URL bar and let's say type register, we should see the register page.
And if you have the same setup, we can move on to the next step.