hey guys my name is Alex and in this
video we’re going to take a closer look
at nested routes but before we do that
the very first thing I’d like to do is
I’ll create an index J’s file instead of
errors and this will help us to import
not found from 404 and what I’ll do is
I’ll do a named export not found like
that and then we can go back to fgs in a
set of referencing the 404 file directly
I could just remove the 404 boss fix and
just simply have a name import of not
found so I’ll save that and I think we
also have one import over here inside of
writers so do the same thing and this
will help us to slightly simplify the
import path I’ll put at the top the same
thing for this one so now having done
that I’d like to move on to nested
routes like I said if I were to go to
our server it houses a database we
already have a list of writers and at
this point we don’t really have any
nested resources what I’d like to do
though is I’d like to go back to this
store and I’d like to add a list of
books so basically every writer would
have a book we’re gonna see how we can
connect those books with the associated
writers right so I went ahead and base
to the list of books what I basically
did here is an abacus text and this text
is basically an array of objects in
which every object basically represents
a book now a book will typically have an
ID that uniquely identifies that book it
also have a writer ID that’s basically a
pointer to the writer who supposedly
willed the book now we also have the
title the description as well as the
year when the book was published and I
went ahead and created a dozen or a
bunch of them so I’m gonna save the file
let’s go back to the server and let’s
try to see the list of text the reason I
called them text instead of books is
because some of these publications are
actually essays so a generic name is
text I think is quite appropriate here
so as you can see here we get a list of
texts or publications for every writer
now of course that in and of itself is
not very useful because we’d like to be
able to associate every text with the
appropriate writer so if we were to type
out the writers what JSON server
provides us with is a special argument
or a query parameter known as embed now
if I add that embed argument and notice
the underscore and then you have to use
as a perfect and if I made that equal to
text when I make the request as you can
see here we get a list of texts along
with all of the other information like
name description and image so this is
useful who wants you fetch the list of
all of the writers as well as the text
that they have produced and if you’re
curious about some of the options that
are available and JSON server you could
always check out the documentation and
the embed property that I was referring
to you could simply search for it and
get up in the readme page as you can see
here the embed property basically allows
you to reference the relationships that
exist between different entities and
like I said in order to create the
relationship I had to add this writer ID
and the write already like I said
basically references the writer by their
ID so for instance in this specific
scenario of this book object or this
text reference is osho and as you
probably know osho is the ID of the
writer that we have over here so there
is a match between the writers ID and
the writer ID property that is available
on every text where every book so with
this in place what I’m gonna do next is
I’m gonna go back to a pas or component
and what I’ll do is I’ll add a and embed
parameter to the URL so that we’re gonna
be able to also fetch the list of text
along with the writers and just to
clarify like I said before if you wanted
to just fetch the list of writers
without the relationship you would do
something like slash flyers but like I
said if you wanted to embed the text of
course did you simply
the embed property add the name of the
relationship and this key basically
refers to the texts that we have defined
in this file and this is the key for the
books the way I’ve created okay
so go back to app yes and I’m going to
save the file and if I go back to the
app as you can see here we have a
request to writers with the embed
property and in a preview you can
already see that we get a list of
writers and they all have the text
property that contains the list of books
they’re associated with those writers so
I’m gonna go back to the editor that
pulls off these files what I’m going to
do next is I’m actually going to create
a new folder inside our brighter
I’ll call it text and for the text let’s
also create index GS and this would be
our component for the text with the book
with a publication whatever you want to
call it we’re gonna do here who’s going
to look through the text that belong to
the writer so we can have a map function
will have a text and what we’re gonna do
is we’re gonna have a list item that’s
why I’m gonna have to add an unordered
list as well so let’s do exactly that
and let’s little some of this guy inside
so I’m gonna fix the annotation over
here and then inside of the ally element
and of course when it comes to ducks we
also have to destructure them from the
writer this would be just another
property just like image or description
and an inside what I’ll do is I’ll have
a link and this one would have to be
imported from react right or Dom so
let’s do exactly that and name import or
link from react watered um and let’s
also have a two property so this one
would have the URL
URL see and then the other thing we need
to add is slash text and then slash the
ID of the text and in this scenario I’ll
have to restructure the ID of the text
object so this would be an ID and also
the title of course and this is not a
self enclosing element or tag this is
actually just in normal tag and we’re
gonna have to also put in the title of
the book in this way we’re gonna have a
list of titles all the books that this
writer has written and the other thing
is of course we’re going to need to also
include the URL which will have to
provide twitted properties and this will
not actually work so if I were to go to
a writer you can see that we get an
error cannot read probably URL of
undefined that’s because we’re not
matching it we’re not passing the match
property from the writer’s component so
the problem happens over here in fact
we’re gonna have to pass all of the
default properties that we receive on
this argument so this one I’m gonna
change to props and we used to
restructure match from most props but
I’ll simply do is I’ll just reference it
off me props variable that we’re gonna
have as the only single argument over
here and this will allow us to be
structure the properties and they’re
gonna have the history the match as well
as a location that are provided by we a
crowd Rome and then when we pass them
down we’re gonna have the URL properly
available on the match and this will
allow us to have a link over here so
having all of those files save as you
can see here we get a list of books and
let’s see the very first one the URL is
text slash self-reliance self-reliance
is an essay written by Ralph Waldo
Emerson and just to clarify and I search
for self-reliance there we go
that’s the book that’s the book that the
ID refer students what I’ll do next is
I’ll go back to this file and then I’m
going to also include
a trout so for this rod what I’d like to
do is I’d like to go first of all a path
of course the path would be the URL
right so we need to reference the
current URL and by the way this URL for
this specific component would be
something like slush writers slash rider
ID so we can reference that and we can
simply add slash text this will
reference the books or the publications
and then finally this would be a text ID
so this would be a dynamic argument and
unless they’ll also provide a render
probably right and in there I’m also
going to have a callback function the
reason I’d like to provide a function
inside of the render prop instead of
using the component problem is because
of the same exact problem that we used
to have for writers we if you remember
in the last video we had to add a
function that had to find the writer
inside of the list of writers but also
verify that we were actually able to
find that writer in the array because if
we were not able to do that we’re gonna
have to show the not found component
which is just simply a an h3 tag that
shows you well not found message so
we’re gonna do the exact same thing over
here so what I’ll do is let’s have a
constant text and we’re gonna try to
find the text inside of text now the
text object and we’ll see if that text
object ID equals the props match params
text ID in fact we can further simplify
this by destructuring the text object so
I’ll drop the ID
you know remove the text object from
there and then we’ll do is gonna have a
condition that says if we have not found
any text we’re gonna do is we’re just
going to return not found we’re gonna
have to do here of courses we’re gonna
have to import not found let’s see the
path would be something like this let’s
go up to levels and then errors omission
reference de for 4cs file like that and
then finally let’s also import the route
component itself because we have a
reference for route over there and find
out what’s also returned in the text
component they were just about to create
what this is going to do is it’s also
going to spread out the text object
they’ll basically provide all the
properties like title description writer
ID all that good stuff so we also need
to do of course is we need to import
text from text and this would reference
the index.js file over here so we need
to do is we would need to import react
from react and let’s create a component
that receives some props we’re going to
attorney fragment for now let’s also
grab the title description as well as
the publish date called the property
published what I’ll do is I’ll create an
age for time let’s say and inside I’m
going to place then the title and let’s
also have the publish date so happy
published and finally let’s also have a
paragraph with the description
like that let’s see if we have any
errors so back in the browser fragment
is not defined we also need to import
that so let’s our fragment any other
errors well we get the self-reliance
text I’m gonna remove it from the URL so
now we just have to get writer
themselves and then I will click on
let’s say nature from the list and as
you can see here we get the title with
the date but we also need to update that
a little bit so what I’ll do is actually
bring this on the same line I’ll just
add the parentheses around it around the
date so this is gonna look a little bit
better at that so now we can basically
navigate between the different writers
so I can go to free to eat say let’s see
the spoke there a thirst row so you can
see the title you can see the publish
date and you can also see the
description now as far as the books go
some of the books will not have the
description so what can do here is we
can actually have a ternary expression
we’re gonna check if we do have the
description and if that’s the case we’re
gonna return it but as an alternative
let’s just simply return an eye tag what
I’ll do is we could simply just put in
no description or something like that we
could save that and that’s what we get
in actually gonna capitalize description
that so that’s what it’s gonna look like
and then we can switch between the books
and of course the title description any
published data can be updated now the
interesting thing about the books though
is what if I try to tackle something
that’s an invalid book ID so let’s try
something bogus and as you can see here
we get a not found message and they
recently get that is because the not
found component over here it’s because
of the AF check that we
and this is the exact same check that we
also have for the rider and in fact I’m
just gonna do here very quickly is the
structure the ID off the rider and I can
just say we have a check against the ID
directly just like that one issue though
is that some books will not have a
published date for example this book we
can actually check it style let’s go
back to the store and let’s see what’s
going on user store JSON well and this
is the object that we are destructuring
and working with so for whatever reason
doesn’t have a published date now going
back to our index GS file with the text
component what we can do here is we can
actually have a check so what we can do
is let’s have a check with the publish
property if we do have a publish
property what I’m going to do is I’ll
wrap the title with the parentheses and
I’ll have the publish date inside
otherwise we can just simply return an
empty string like that so I’ll save the
file I’m going back to the browser in
this case we have a book title that
doesn’t have a publish date and this one
does have one so let’s actually inspect
the element we have the title and
publish date but let’s say if I select
one that doesn’t have the publish date
unexpected title and we just get a an
empty string at the end so that’s gonna
solve the problem with a publish date
now I think this is good enough for now
and of course where you can continue
adding more features eventually and
we’re going to explore some of the other
functionalities that are available
inside of we at bravura dome but for the
very next video we’re actually going to
pull in materialized what I’ll do is
I’ll add my chili UI is a dependency and
we’re going to use some of the mature UI
components in order to beautify the
application so we’ve got a lot of work
to do and I hope to see you next time thanks for watching
video we’re going to take a closer look
at nested routes but before we do that
the very first thing I’d like to do is
I’ll create an index J’s file instead of
errors and this will help us to import
not found from 404 and what I’ll do is
I’ll do a named export not found like
that and then we can go back to fgs in a
set of referencing the 404 file directly
I could just remove the 404 boss fix and
just simply have a name import of not
found so I’ll save that and I think we
also have one import over here inside of
writers so do the same thing and this
will help us to slightly simplify the
import path I’ll put at the top the same
thing for this one so now having done
that I’d like to move on to nested
routes like I said if I were to go to
our server it houses a database we
already have a list of writers and at
this point we don’t really have any
nested resources what I’d like to do
though is I’d like to go back to this
store and I’d like to add a list of
books so basically every writer would
have a book we’re gonna see how we can
connect those books with the associated
writers right so I went ahead and base
to the list of books what I basically
did here is an abacus text and this text
is basically an array of objects in
which every object basically represents
a book now a book will typically have an
ID that uniquely identifies that book it
also have a writer ID that’s basically a
pointer to the writer who supposedly
willed the book now we also have the
title the description as well as the
year when the book was published and I
went ahead and created a dozen or a
bunch of them so I’m gonna save the file
let’s go back to the server and let’s
try to see the list of text the reason I
called them text instead of books is
because some of these publications are
actually essays so a generic name is
text I think is quite appropriate here
so as you can see here we get a list of
texts or publications for every writer
now of course that in and of itself is
not very useful because we’d like to be
able to associate every text with the
appropriate writer so if we were to type
out the writers what JSON server
provides us with is a special argument
or a query parameter known as embed now
if I add that embed argument and notice
the underscore and then you have to use
as a perfect and if I made that equal to
text when I make the request as you can
see here we get a list of texts along
with all of the other information like
name description and image so this is
useful who wants you fetch the list of
all of the writers as well as the text
that they have produced and if you’re
curious about some of the options that
are available and JSON server you could
always check out the documentation and
the embed property that I was referring
to you could simply search for it and
get up in the readme page as you can see
here the embed property basically allows
you to reference the relationships that
exist between different entities and
like I said in order to create the
relationship I had to add this writer ID
and the write already like I said
basically references the writer by their
ID so for instance in this specific
scenario of this book object or this
text reference is osho and as you
probably know osho is the ID of the
writer that we have over here so there
is a match between the writers ID and
the writer ID property that is available
on every text where every book so with
this in place what I’m gonna do next is
I’m gonna go back to a pas or component
and what I’ll do is I’ll add a and embed
parameter to the URL so that we’re gonna
be able to also fetch the list of text
along with the writers and just to
clarify like I said before if you wanted
to just fetch the list of writers
without the relationship you would do
something like slash flyers but like I
said if you wanted to embed the text of
course did you simply
the embed property add the name of the
relationship and this key basically
refers to the texts that we have defined
in this file and this is the key for the
books the way I’ve created okay
so go back to app yes and I’m going to
save the file and if I go back to the
app as you can see here we have a
request to writers with the embed
property and in a preview you can
already see that we get a list of
writers and they all have the text
property that contains the list of books
they’re associated with those writers so
I’m gonna go back to the editor that
pulls off these files what I’m going to
do next is I’m actually going to create
a new folder inside our brighter
I’ll call it text and for the text let’s
also create index GS and this would be
our component for the text with the book
with a publication whatever you want to
call it we’re gonna do here who’s going
to look through the text that belong to
the writer so we can have a map function
will have a text and what we’re gonna do
is we’re gonna have a list item that’s
why I’m gonna have to add an unordered
list as well so let’s do exactly that
and let’s little some of this guy inside
so I’m gonna fix the annotation over
here and then inside of the ally element
and of course when it comes to ducks we
also have to destructure them from the
writer this would be just another
property just like image or description
and an inside what I’ll do is I’ll have
a link and this one would have to be
imported from react right or Dom so
let’s do exactly that and name import or
link from react watered um and let’s
also have a two property so this one
would have the URL
URL see and then the other thing we need
to add is slash text and then slash the
ID of the text and in this scenario I’ll
have to restructure the ID of the text
object so this would be an ID and also
the title of course and this is not a
self enclosing element or tag this is
actually just in normal tag and we’re
gonna have to also put in the title of
the book in this way we’re gonna have a
list of titles all the books that this
writer has written and the other thing
is of course we’re going to need to also
include the URL which will have to
provide twitted properties and this will
not actually work so if I were to go to
a writer you can see that we get an
error cannot read probably URL of
undefined that’s because we’re not
matching it we’re not passing the match
property from the writer’s component so
the problem happens over here in fact
we’re gonna have to pass all of the
default properties that we receive on
this argument so this one I’m gonna
change to props and we used to
restructure match from most props but
I’ll simply do is I’ll just reference it
off me props variable that we’re gonna
have as the only single argument over
here and this will allow us to be
structure the properties and they’re
gonna have the history the match as well
as a location that are provided by we a
crowd Rome and then when we pass them
down we’re gonna have the URL properly
available on the match and this will
allow us to have a link over here so
having all of those files save as you
can see here we get a list of books and
let’s see the very first one the URL is
text slash self-reliance self-reliance
is an essay written by Ralph Waldo
Emerson and just to clarify and I search
for self-reliance there we go
that’s the book that’s the book that the
ID refer students what I’ll do next is
I’ll go back to this file and then I’m
going to also include
a trout so for this rod what I’d like to
do is I’d like to go first of all a path
of course the path would be the URL
right so we need to reference the
current URL and by the way this URL for
this specific component would be
something like slush writers slash rider
ID so we can reference that and we can
simply add slash text this will
reference the books or the publications
and then finally this would be a text ID
so this would be a dynamic argument and
unless they’ll also provide a render
probably right and in there I’m also
going to have a callback function the
reason I’d like to provide a function
inside of the render prop instead of
using the component problem is because
of the same exact problem that we used
to have for writers we if you remember
in the last video we had to add a
function that had to find the writer
inside of the list of writers but also
verify that we were actually able to
find that writer in the array because if
we were not able to do that we’re gonna
have to show the not found component
which is just simply a an h3 tag that
shows you well not found message so
we’re gonna do the exact same thing over
here so what I’ll do is let’s have a
constant text and we’re gonna try to
find the text inside of text now the
text object and we’ll see if that text
object ID equals the props match params
text ID in fact we can further simplify
this by destructuring the text object so
I’ll drop the ID
you know remove the text object from
there and then we’ll do is gonna have a
condition that says if we have not found
any text we’re gonna do is we’re just
going to return not found we’re gonna
have to do here of courses we’re gonna
have to import not found let’s see the
path would be something like this let’s
go up to levels and then errors omission
reference de for 4cs file like that and
then finally let’s also import the route
component itself because we have a
reference for route over there and find
out what’s also returned in the text
component they were just about to create
what this is going to do is it’s also
going to spread out the text object
they’ll basically provide all the
properties like title description writer
ID all that good stuff so we also need
to do of course is we need to import
text from text and this would reference
the index.js file over here so we need
to do is we would need to import react
from react and let’s create a component
that receives some props we’re going to
attorney fragment for now let’s also
grab the title description as well as
the publish date called the property
published what I’ll do is I’ll create an
age for time let’s say and inside I’m
going to place then the title and let’s
also have the publish date so happy
published and finally let’s also have a
paragraph with the description
like that let’s see if we have any
errors so back in the browser fragment
is not defined we also need to import
that so let’s our fragment any other
errors well we get the self-reliance
text I’m gonna remove it from the URL so
now we just have to get writer
themselves and then I will click on
let’s say nature from the list and as
you can see here we get the title with
the date but we also need to update that
a little bit so what I’ll do is actually
bring this on the same line I’ll just
add the parentheses around it around the
date so this is gonna look a little bit
better at that so now we can basically
navigate between the different writers
so I can go to free to eat say let’s see
the spoke there a thirst row so you can
see the title you can see the publish
date and you can also see the
description now as far as the books go
some of the books will not have the
description so what can do here is we
can actually have a ternary expression
we’re gonna check if we do have the
description and if that’s the case we’re
gonna return it but as an alternative
let’s just simply return an eye tag what
I’ll do is we could simply just put in
no description or something like that we
could save that and that’s what we get
in actually gonna capitalize description
that so that’s what it’s gonna look like
and then we can switch between the books
and of course the title description any
published data can be updated now the
interesting thing about the books though
is what if I try to tackle something
that’s an invalid book ID so let’s try
something bogus and as you can see here
we get a not found message and they
recently get that is because the not
found component over here it’s because
of the AF check that we
and this is the exact same check that we
also have for the rider and in fact I’m
just gonna do here very quickly is the
structure the ID off the rider and I can
just say we have a check against the ID
directly just like that one issue though
is that some books will not have a
published date for example this book we
can actually check it style let’s go
back to the store and let’s see what’s
going on user store JSON well and this
is the object that we are destructuring
and working with so for whatever reason
doesn’t have a published date now going
back to our index GS file with the text
component what we can do here is we can
actually have a check so what we can do
is let’s have a check with the publish
property if we do have a publish
property what I’m going to do is I’ll
wrap the title with the parentheses and
I’ll have the publish date inside
otherwise we can just simply return an
empty string like that so I’ll save the
file I’m going back to the browser in
this case we have a book title that
doesn’t have a publish date and this one
does have one so let’s actually inspect
the element we have the title and
publish date but let’s say if I select
one that doesn’t have the publish date
unexpected title and we just get a an
empty string at the end so that’s gonna
solve the problem with a publish date
now I think this is good enough for now
and of course where you can continue
adding more features eventually and
we’re going to explore some of the other
functionalities that are available
inside of we at bravura dome but for the
very next video we’re actually going to
pull in materialized what I’ll do is
I’ll add my chili UI is a dependency and
we’re going to use some of the mature UI
components in order to beautify the
application so we’ve got a lot of work
to do and I hope to see you next time thanks for watching
Please follow and like us: