We now have three pages in our
web application: the HomePage,
the ReviewsPage, that's visible
at the "/reviews" path,
and the review for Stardew Valley,
that has the game name in the path,
making it a clean URL,
which should also help search engines index
this page for the right keywords.
Now, as an exercise, I would like you
to create a couple more pages.
Let's say we want an "/about" page,
where the user can find more information
about our website.
And then we want to review another game,
in this case "Hollow Knight".
To follow the same pattern as our other review,
the path for this other game should
be "/reviews/hollow-knight".
As the contents for these new pages,
you can keep the same structure
as our existing pages;
just change the heading to say "About"
and "Hollow Knight" respectively,
and write whatever you like in the paragraph.
So, if you feel like doing this exercise,
please pause this video now,
and go and create two new pages,
accessible at the "/about" and "/reviews/hollow-knight"
paths.
I'll show you the solution in a few seconds.
Ok, let's take a look at the new pages.
If you did the exercise,
under "app" you should now have
a folder called "about",
containing a "page.jsx" file,
that exports a React component like this one.
And that page should be visible
under the "/about" path.
Of course, you might have written something
different in the paragraph,
and that's absolutely fine.
You should also have created another page,
under the "hollow-knight" folder,
nested inside "reviews".
Again, this file defines another React component,
and we can open it in the browser
as "/reviews/hollow-knight".
This is what that page looks like.
Ok. This was a fairly simple exercise
to reinforce how files in our project are
exposed as URL paths in our website.
Now, some people find it a bit strange at first,
to have all these files called "page.jsx".
For example, in Visual Studio Code you can use the
"Command + P" shortcut to quickly
find a file in your project.
(That will be "Control + P" if
you're on Windows or Linux.)
Now, if we search for "page", we'll see
many files all with the same name.
But we can also see the path next to each one,
so if we're looking for the "hollow-knight"
page for instance,
we can easily find the right one anyway.
In fact, we can also search by the path,
so if we start typing "hollow",
we'll find the right page straight away.
In my experience so far, having lots
of files all named "page." something
is not really a problem at all.
In fact, sometimes it can also be useful,
like, if you need to find all the pages
to modify an import or similar.