Instructor: In the last lecture
we worked on this quote detailed page
and we made sure that if I enter an unknown quote ID here
I get some fallback text here.
But what if I enter a totally unknown route
to begin with,
something like my domain slash hello
then we have this blank page.
And in reality we typically instead
when I show some 404 page
a fallback page that tells the user
that this page doesn't exist
instead of just showing a blank page.
And we can also add such a 404 page
a not found page with react router as well.
For this all,
first of all, add a new page here in the pages folder.
And that's the not found JS file.
And in there, I'll add the, not found component
and export this here and then there,
I'll just return a div with a class name off centered.
And now that's not as CSS module class name,
but a globally defined CSS class name
defined here in this index CSS file.
And then this div I'll then just say, page not found.
And of course you can change the content
of this page and style it however you want.
Now with that we have this not found page component to find
but how do we now make sure
that it is showing up if a user enters
some unsupportive path?
For this we can go back to all our root route definition.
'Cause here we are defining all the routes
our application supports.
Now, if we go through that switch statement
and we didn't have a single match of, for example,
for a slash hello, we don't have a match here.
Then we leave the switch statement without a match.
And hence nothing shows up on the screen,
therefore to show a fallback and not found page.
The approach typically is that we add one route here
at the end, which is looked at if no other route matched
where we match all incoming requests.
So to say.
So where we match all URLs
and we do that by setting the path to a star
This wild card character signals to react router
that any path any URL should match this route.
And therefore this route has to come last
so that it does not consume one of the requests
to one of the actual routes we have.
But if we didn't have any match up to this point
then we want to match all URLs with this route.
And then just rendered this not found page here.
So here I'll now import not found from pages
Not found.
And output does not found component
here in this match all route here,
which is only considered if no other route matched.
And with this, if I saved this for hello,
we get this page not found text.
On the other hand,
if I do enter slash quotes.
So I do visit with one of my supported pages.
Then I see that page.
And with this, we also added this not found page
which of course is a never common requirement you might have
in your applications.