hey guys welcome back to a react water
project I have the app running on port
3000 and the only thing I changed is I
updated the minor version of react 260
and 3 since that’s a new version that
came out just a few days ago and before
we move on to nested routes
let’s first sort out a few problems in
the application so for now if we go to
writer
we forgot to remove the match and the ID
process because we no longer use them
anymore
so let’s remove those and nothing is
gonna change another issue that I found
is if you go back to the browser and if
you try typing a gibberish route so for
example bogus you’re going to see that
it doesn’t load anything now the reason
that happens if you go back to the app
and if we look at the route definition
we basically have here is we have a
route for the home page that basically
just shows you home and we also have
routes for the writers but we’re not
actually matching any other route that
is not part of that list now in order to
catch all of the other routes that do
not match the slash so the home path or
the writers or anything that follows the
writers we could have another route
component here and to match anything
else what we basically do here is we
basically omit the path property
altogether so if you wanted to match a
specific route you would pass that
property in and you would pass in the
value of the route that you would like
to match now if you want to match every
possible route then you omit the path
property and you can simply provide
either the component property then you
have to pass the component itself or you
could also pass in the render properties
so before we pass the render property we
can do here is we can actually also
include a closure function and we can
simply include a message let’s put an h3
tags and let’s say not phone let’s say
that now if I go back to the app as you
can see here we are showing the not
found message so this is basically how
you would handle a 404 error
now the only problem with that is I go
back to the main page the home page I’m
also going to see the northbound route
the reason that happens is of course
because the routes of the last row
definition that we declared it basically
matches every single route regardless of
what the path is now this is not a
problem if we have a route that
basically doesn’t exist that we don’t
have a definition for in the application
but what if it’s Reiter’s what if it’s
home or what if it’s a specific writer
we’re always going to see that not found
message that we have over here in this
realm now in order to alleviate that
problem we can do here is we can
actually wrap all those three routes
with a switch and the switch is actually
a component that comes from we a crowded
Dom and the way it works is very similar
to a normal switch and JavaScript so
what it’s gonna do is it’s actually
going to match the very first route
going from top to bottom and when it
does match that route it’s going to
ignore all the other routes and it’s
actually only going to render that
specific route that it was able to match
so for example if we go to the home page
we are no longer showing the not found
message because that route is not being
matched now in the same node we could
also remove the exact property from the
route in this scenario we’re actually
not going to see the writers on the home
page because the switch is only going to
take into consideration the very first
route component that it sees and it’s
actually not going to parse all the
other ones so you could remove that
exact property that we had before but of
course this is going to not work for all
the other non existing routes because if
you go to something like bogus for
example you’re not actually going to see
the not found message and like you
probably know that’s of course because
this slash is basically treated as a
prefix so in this situation like I said
it’s still better to bring back the
exact prop so this is going to match the
exact
and not anything else so we saved that
and we go back to the browser I can
refresh this page as you can already see
we have this not found message over here
because we are matching a route that we
don’t really have a definition for so
this would work sort of like a fullback
route now what about the writers so for
example if I go back to writers
multiplet on Ralph Waldo Emerson what if
I were to change the path so what if I
were to type out something else let’s
say Jordan Peterson now we get this –
over here and supposedly it’s rendering
the writer component as well and the
reason that’s happening is because we’re
trying to find the writer in the list of
writers that we provide as a prop over
here we’re actually trying to find that
writer with the ID that’s contained
inside of the URL of course the thought
of valid ID so we’re not able to find
anything in this expression returns
undefined
now the component is still being
rendered because we don’t have any
condition that would say well if there’s
no writer that we were able to find well
let’s do something else then so what I’m
going to do instead is I’m actually
going to pass in a function okay in the
end what this function is going to do is
it’s basically going to return the
writer component but before we do that
of course we need to first try to get
the writer I guess I’m going to have a
constant let’s say writer so I’m going
to try to find the writer and I might or
might not be able to do that but in case
we don’t find a writer so for example
the ID was invalid in this case what we
can do here is we can actually redirect
to let’s say 404 okay now the redirect
is another component and then react
rather dumb what this component
basically does is it allows you to well
basically redirect to a given page so in
this example this is a component in and
of itself so there’s no magic in it it’s
just a normal JavaScript component but
when it’s being returned or when it’s
being executed we’ll run
it’s basically going to read the to prop
that you passed and it’s going to make a
redirection it’s just basically going to
update the URL without reloading the
page now let’s see this in action so I’m
going to save this file let’s go back
and looks like what you have an error
here I forgot to put any writer so we’re
gonna do here is basically say well
let’s try to find you writer if we do
find the writer we’re going to expand
out the properties of that writer
otherwise we’re going to make a
redirection to for for now as you can
see we get 404 so again if I type of
let’s say Jordan Peterson we get not
found but if I go to an existing writer
of course I’m able to see the details of
that specific writer now the only thing
here as you can see there’s a bit of
inconsistency so for example if I were
to go to slash test we get not fountain
but we’re not actually redirected to 404
but on the other hand if I type out
let’s say writers like I said Jordan
Peterson that’s not a valid writer we
don’t have this writer in our store so
we’re redirected to a 404 page now
that’s a bit of an inconsistency it’s
basically up to you it’s kind of it kind
of depends on the application logic that
you implement yourself so for example
one thing you could do is if you find a
URL it’s not a valid URL or that URL and
you can’t match within your application
you can make a redirection to a 404 page
and that’s basically what we’re doing
here and the other thing you could also
do is you could simply return a message
pretty much in the same way like we do
in the app component so for example here
we’re just basically returning a h3 tag
that contains the not filed message if
you do the same thing over there as well
so if I go back to our Jordan Peterson
over here we get the not found message
and the added bonus is that you can also
see the list of writers at the top so
you could actually navigate to one of
the existing or valid writers that we do
have in a store so I kind of prefer this
latter approach so instead of actually
making a redirect I’m actually going to
keep the user on the same URL so that if
they want to change that URL you’re
actually going to be able to see that
this is the URL that they typed out or
went into but this is not a valid URL so
they will have to change it and I think
it’s a little bit better as far as user
experience and just showing a or making
every direction to a 404 page so what
I’m actually going to do is inside of
components I’m going to create a new
folder let’s call it errors and what
I’ll do is I’ll create a new file let’s
call it for for GS and this would
basically import yet from react because
we always need to include that and then
we’re gonna do export default I’m just
going to be an anonymous function and
inside we can basically just return that
not found message okay we can save it
and we’ve actually started using it now
so we’ll do is I’ll import not from
let’s go to errors and this one would be
for a4 and what we can start doing is
instead of having the render problem we
can actually have a component and this
one would be not found component as you
might have guessed but close it out and
going back in here I’m gonna do the same
thing so we’re trying to not found
component and of course I’ll need to
also import it so not sound from let’s
go up let’s go to errors and for floor
let’s save it not very fresh the page as
you can see here we get e not found
message but if would say I go to let’s
say test I also get that message so the behavior is now consistent
project I have the app running on port
3000 and the only thing I changed is I
updated the minor version of react 260
and 3 since that’s a new version that
came out just a few days ago and before
we move on to nested routes
let’s first sort out a few problems in
the application so for now if we go to
writer
we forgot to remove the match and the ID
process because we no longer use them
anymore
so let’s remove those and nothing is
gonna change another issue that I found
is if you go back to the browser and if
you try typing a gibberish route so for
example bogus you’re going to see that
it doesn’t load anything now the reason
that happens if you go back to the app
and if we look at the route definition
we basically have here is we have a
route for the home page that basically
just shows you home and we also have
routes for the writers but we’re not
actually matching any other route that
is not part of that list now in order to
catch all of the other routes that do
not match the slash so the home path or
the writers or anything that follows the
writers we could have another route
component here and to match anything
else what we basically do here is we
basically omit the path property
altogether so if you wanted to match a
specific route you would pass that
property in and you would pass in the
value of the route that you would like
to match now if you want to match every
possible route then you omit the path
property and you can simply provide
either the component property then you
have to pass the component itself or you
could also pass in the render properties
so before we pass the render property we
can do here is we can actually also
include a closure function and we can
simply include a message let’s put an h3
tags and let’s say not phone let’s say
that now if I go back to the app as you
can see here we are showing the not
found message so this is basically how
you would handle a 404 error
now the only problem with that is I go
back to the main page the home page I’m
also going to see the northbound route
the reason that happens is of course
because the routes of the last row
definition that we declared it basically
matches every single route regardless of
what the path is now this is not a
problem if we have a route that
basically doesn’t exist that we don’t
have a definition for in the application
but what if it’s Reiter’s what if it’s
home or what if it’s a specific writer
we’re always going to see that not found
message that we have over here in this
realm now in order to alleviate that
problem we can do here is we can
actually wrap all those three routes
with a switch and the switch is actually
a component that comes from we a crowded
Dom and the way it works is very similar
to a normal switch and JavaScript so
what it’s gonna do is it’s actually
going to match the very first route
going from top to bottom and when it
does match that route it’s going to
ignore all the other routes and it’s
actually only going to render that
specific route that it was able to match
so for example if we go to the home page
we are no longer showing the not found
message because that route is not being
matched now in the same node we could
also remove the exact property from the
route in this scenario we’re actually
not going to see the writers on the home
page because the switch is only going to
take into consideration the very first
route component that it sees and it’s
actually not going to parse all the
other ones so you could remove that
exact property that we had before but of
course this is going to not work for all
the other non existing routes because if
you go to something like bogus for
example you’re not actually going to see
the not found message and like you
probably know that’s of course because
this slash is basically treated as a
prefix so in this situation like I said
it’s still better to bring back the
exact prop so this is going to match the
exact
and not anything else so we saved that
and we go back to the browser I can
refresh this page as you can already see
we have this not found message over here
because we are matching a route that we
don’t really have a definition for so
this would work sort of like a fullback
route now what about the writers so for
example if I go back to writers
multiplet on Ralph Waldo Emerson what if
I were to change the path so what if I
were to type out something else let’s
say Jordan Peterson now we get this –
over here and supposedly it’s rendering
the writer component as well and the
reason that’s happening is because we’re
trying to find the writer in the list of
writers that we provide as a prop over
here we’re actually trying to find that
writer with the ID that’s contained
inside of the URL of course the thought
of valid ID so we’re not able to find
anything in this expression returns
undefined
now the component is still being
rendered because we don’t have any
condition that would say well if there’s
no writer that we were able to find well
let’s do something else then so what I’m
going to do instead is I’m actually
going to pass in a function okay in the
end what this function is going to do is
it’s basically going to return the
writer component but before we do that
of course we need to first try to get
the writer I guess I’m going to have a
constant let’s say writer so I’m going
to try to find the writer and I might or
might not be able to do that but in case
we don’t find a writer so for example
the ID was invalid in this case what we
can do here is we can actually redirect
to let’s say 404 okay now the redirect
is another component and then react
rather dumb what this component
basically does is it allows you to well
basically redirect to a given page so in
this example this is a component in and
of itself so there’s no magic in it it’s
just a normal JavaScript component but
when it’s being returned or when it’s
being executed we’ll run
it’s basically going to read the to prop
that you passed and it’s going to make a
redirection it’s just basically going to
update the URL without reloading the
page now let’s see this in action so I’m
going to save this file let’s go back
and looks like what you have an error
here I forgot to put any writer so we’re
gonna do here is basically say well
let’s try to find you writer if we do
find the writer we’re going to expand
out the properties of that writer
otherwise we’re going to make a
redirection to for for now as you can
see we get 404 so again if I type of
let’s say Jordan Peterson we get not
found but if I go to an existing writer
of course I’m able to see the details of
that specific writer now the only thing
here as you can see there’s a bit of
inconsistency so for example if I were
to go to slash test we get not fountain
but we’re not actually redirected to 404
but on the other hand if I type out
let’s say writers like I said Jordan
Peterson that’s not a valid writer we
don’t have this writer in our store so
we’re redirected to a 404 page now
that’s a bit of an inconsistency it’s
basically up to you it’s kind of it kind
of depends on the application logic that
you implement yourself so for example
one thing you could do is if you find a
URL it’s not a valid URL or that URL and
you can’t match within your application
you can make a redirection to a 404 page
and that’s basically what we’re doing
here and the other thing you could also
do is you could simply return a message
pretty much in the same way like we do
in the app component so for example here
we’re just basically returning a h3 tag
that contains the not filed message if
you do the same thing over there as well
so if I go back to our Jordan Peterson
over here we get the not found message
and the added bonus is that you can also
see the list of writers at the top so
you could actually navigate to one of
the existing or valid writers that we do
have in a store so I kind of prefer this
latter approach so instead of actually
making a redirect I’m actually going to
keep the user on the same URL so that if
they want to change that URL you’re
actually going to be able to see that
this is the URL that they typed out or
went into but this is not a valid URL so
they will have to change it and I think
it’s a little bit better as far as user
experience and just showing a or making
every direction to a 404 page so what
I’m actually going to do is inside of
components I’m going to create a new
folder let’s call it errors and what
I’ll do is I’ll create a new file let’s
call it for for GS and this would
basically import yet from react because
we always need to include that and then
we’re gonna do export default I’m just
going to be an anonymous function and
inside we can basically just return that
not found message okay we can save it
and we’ve actually started using it now
so we’ll do is I’ll import not from
let’s go to errors and this one would be
for a4 and what we can start doing is
instead of having the render problem we
can actually have a component and this
one would be not found component as you
might have guessed but close it out and
going back in here I’m gonna do the same
thing so we’re trying to not found
component and of course I’ll need to
also import it so not sound from let’s
go up let’s go to errors and for floor
let’s save it not very fresh the page as
you can see here we get e not found
message but if would say I go to let’s
say test I also get that message so the behavior is now consistent
Please follow and like us: