REACT JS TUTORIAL #7 - React Router Params & Queries Video Lecture | Learn and master: Flux - Game Development

so before I get into handling
complicated data with reacts that would
be flux or Redux
which I'm really excited to get into
let's go ahead and just cover a little
bit more on routing handling routes
handling route information and then
let's get this HTML if you'll remember
right now the entire HTML is just
rendering into this so we want to get
almost all this HTML into our actual
react single page app so we'll want to
convert that all as well once those two
are out of the way we're ready to start
taking on a framework style approach to
react and that's really where react gets
fun really starts give you some great
mental patterns so let's look at some
more routing features right now lots of
times
save the archives you'll actually let me
go back to my page lots of times you
want to go archives slash some article
or say some article some filter you know
you'll actually want to go to a specific
archive so the easy way to do this is to
look don't want to save my web page
easiest way to do this is just add
another route or more detail to my route
so we're going to go to archives and
we're going to go to specific article
and that'll be called articles so I'm
adding what's called a parameter that
let's refresh so now I got archives
which no longer matches that's very
important to know
now this path is this route is only
going to match archives articles so
that's going to be a specific article
and now it's going to match archive
slash some article let's go ahead and
look at this archives let's go ahead
console.log props now so I'm in the
archives route again which is whenever
we go archives and give it an article
it's going to render the archives
component so in this archives component
let's go ahead inspect these props now
you can see that it's passing a params
an article has a value so it's some
article some other article let's go look
at it now re-rendered article is some
other article excellent let's actually
go spit this out on the page here
there you go this props
sorry not props params and I'll clean
that up in a second there you go some
other article some other you know it's
basically going to change as my as my
path changes so that's cool and the way
you could really clean that up is you go
Const params equals this props and then
I can just go params dot article that
cleans it up a different bit a
difference or if you were pulling
multiple params and then you're pulling
multiple values out of those params you
can even clean up more so this could
just be article you know for if you're
if you're adding a lot of values to your
render method it really helps to have
nice clean small variable names so there
we go that's rendered in another thing
you can do without any configuration on
your route is you you can just use query
variables so we can just add a question
mark and let's go say date equals today
and now if I look at again my props
object I can look at the location and
I've got this query in there and that's
just real time going to be any Year
query brand values date today and filter
equals none so then I can go back to
location I've got date today filter none
so let's go ahead and snatch that pull
that in call Squier e equals pull in
query out of location and then let's go
ahead and get what did I use date and
filter so let's wrap this in a div since
I can't return just three H ones and
then let's actually spit out date filter
and there we go now I'm snatching all my
information that the user might be
passing in their date today filter 9 and
then if I were to say filter all there
you go it's all going to change real
time yesterday bla bla bla
and then lastly you can also make stuff
you can make stuff optional so I can go
to archives and I can actually just wrap
these in parens and now it will match if
I do article or if I don't have article
in there so that's probably more what I
want the archives page to be doing so
that's how you do that let's go and take
this archives link now the last thing I
want to show you in this video is lots
of times you want to know if your route
is active you want to add a class like
up here if the featured route was active
I'd want this to have the class active
for all my bootstrap stuff to look good
so that's very simple to do with react
router let me go to my layout yup here
we go so you're simply just going to add
active class name as long as you're
using the link component you simply just
go active class name equals and then
whatever you want that to be so in this
case I've added active class name equals
test
so whenever settings is let's go ahead
inspect this archives element I do not
have a class name of test but when the
archives are out is there boom the
active class of test just got added and
again it's gone so that's kind of really
nice and then if you wanted to do it
programmatically programmatically then
you can actually get this out of history
so if you remember I always have that
props history right there you can see so
let's get history out of props and then
you can go history that is active and
we'll just look up I'll just look up
archives lets console.log this
so we're going to console.log if
archives is active let's say so false
true false true there you go so now
everything's working we can go ahead and
just pull our components in I'm not
going to bore you by doing this in front
of you but I'm just going to go ahead
and take the navigation out put it into
layout as a navigation component get the
footer out into its own stuff basically
just get all this stuff broken out into
layout and then from here on out we're
going to cover flux and redux and data
and a whole bunch of fun stuff so at
this point get comfortable with how
react works get comfortable with how
routing works you want to know those
well before you get into the framework
aspect of react so once those are good
to go check out the next videos