Great.
We understand the basics.
We also cover the exact problem.
Now let's talk about the error page and in order sure how it's gonna work.
We're going to have to work to finish the application and let's imagine the scenario where a user navigates
to a page that does not exist.
So in my case I'm going to go with some kind of I don't know how logs or forward slash Oh so a user
is trying to navigate there and instead of displaying nothing which would be a case right now in our
current setup we're going to display the error page and we can place wherever we want within the error
page and in my error page I just have ups.
It's a dead end and then we have a link of navigating PECO again you can place whatever you would want
within the half page.
More important and please understand that we are doing this just so user doesn't have this experience
where nothing is displayed on the screen.
How can I see that.
Well if we're going to head over to our current application and then instead of let's say navigating
to a Bolton cart the two pages that we have.
Let's say I'm gonna navigate to a hello.
And like I said we're just gonna have the empty page which is not the best user experience.
So how do we set up this error page.
Well first of all we are to have the page.
That's a good start.
And then let's say as our route right after the cart I'm gonna have a route not going to have the path
yet and then we're just going to place our error page somewhere say error page is gonna be displayed
here and then in order to set up the full back page we need to use path and then we need to place a
star.
And if you're wondering where I'm getting the star from now let's head over to their official documentation
and let's look for no match.
And then I can see that around with the path of star all these matches.
However now we're gonna have a different problem where each and every time I'm gonna navigate to let's
say home more about our cart I'm always gonna have this error page because it always matches.
So what would be the fix or the fix is gonna be using the switch component if you want to find out more
about which component Harrower back docs look for the basic keep on scrolling and you can read the switch
looks through all its children routes and then renders the first one whose path matches the current
euro.
So that's exactly scenario where we're looking for.
So within the router again don't place it outside but place it within the router.
We're going to place a switch.
We're going to make sure that we wrap all our routes within the switch and then in this case we're only
going to display the error if we're gonna navigate to a page that doesn't exist because remember Star
always matched or in this case since let's say we're heading over to a homepage we only would want to
render the road right route with a homepage and again switch is going to look through all its children
route elements and then it's going to render the first one and in our case what is gonna be the first
one.
Well that's gonna be homepage if we're gonna do the same thing we're about.
Again we're just gonna display the about like so.
However if we're gonna navigate to a page that doesn't exist let's say again Hello we're gonna have
hello from our page and that's how we can set up our four or four fallback using reactive router down.