All language subtitles for 018 Adding a _Not Found_ Page_en

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.