Introduction to React Router v3

In this course, we're going to look at how to use React Router version 3 to implement
a routing system in a React application.
We are going to use Create React app to generate a project.
Then we're going to look at the router, hash history and route components from React Router.
Then we're going to learn how to navigate between pages using the link component.
Later we're going to look at nested routes, that is we're going to see how we can have
a page that includes a menu and have only the content change as we switch to pages.
The menu still fixed for each page.
We're going to also look at URL parameters and query strings.
We're going to learn how to access those from the props injected by React Router.
Finally, we're going to look at how to programmatically navigate between pages using either history
or the router object from React Router.
So let's get started.
Let's open the terminal.
For this course, I'm going to use node version 8 with npm 5.
So let's get started.
First you're going to need Create React app to generate a React project.
If you don't already have it, you can install it using npm install-gcreatereactapp.
You can also use yard to install it.
Once we have create react app, we need to only say create react app and then give the
name of your application.
I'm going to call the application using react router.
So create react app and the name for the project.
Create react app is going to generate our project, installing all the dependencies there's
not necessary.
So let's wait a little bit until it finishes.
If you want, you can skip this video, skip the part where React is being installed.
Okay, so we got everything ready now.
The project is now here.
So let's change the directory to the project.
You can see these are the files.
Let's now open the text editor to take a look at what we have.
In my case, I'm using Adam, my text editor.
So we have the package JSON here.
Just a note, we're using react version 16.2.
And if you go to the SRC directory, there's index.js.
This is where the react application is being injected into the DOM from the index.html
file that is in the public directory.
Okay, if you go to public slash index.html, you have a div right here with ID root.
This is where the react application is going to be injected.
And the code that does that inject is in us SRC slash index.js.
You can see here react.dom.rander, the app component in the root div.
Okay, now let's get back to the terminal and install react router.
So let's do npm install react router at version three.
Okay, don't forget we're using version three for this example.
So you need to say add three.
Since I'm using npm version eight, I don't no longer need to say dash dash save to include
that in my packages and dependencies.
React router version three was installed.
Let's check our package.json to confirm it is indeed there.
Here we are react router version 3.2.
Okay now that we have a project to work with, we're going to start building our pages in
the next lecture.
Okay, so until then.


0007-01 Introduction to React Router v3

Creating Different Page Components

In this lecture, we're going to create the pages we're going to need for our application.
So let's say we have a page, an about page, and then we have another page with some product
listed.
So let's first create those components for each page, and then after that, in the next
lecture, we're going to start hooking up React Router to allow us to switch between pages
using the URL.
Okay, so let's get started.
Let's create first the about page.
Let's go to our project.
I'm going to open up my text editor here, Adam.
After the directory SRC, I am going to create a new file called about.js.
So let's keep it simple and just create a stateless functional component.
Let's go.
So first we're going to need React, import React from React, because we're going to be
using JSX.
So let's make a variable and call it about.
This is going to hold our stateless functional component.
For stateless functional components, all we need to do is to define a function that takes
a parameter that is R to props passed to this component.
So let's use an arrow function for that.
And I'm just going to do it like this and return a template like this.
So let's put a, let's say a div.
And inside this div, if you can see from the sketch there, we just have the heading about
and the content.
This is the about page.
So let's do just that.
Let's get started.
Just put an h1 there about and just some text.
This is the about page inside a p tag.
How about that?
So now we have the about component and this component represents the about page.
Okay.
Let's then export the file about.
So we can use it from another file.
With this, let's go ahead and create the next component that's products.
How about you do it yourself and then pause the video.
After you do it, let's check answers.
How did it go?
So let's go create products.js.
Let's import react from react because we're going to need the JSX.
Let's create a stateless functional component.
Let's keep it simple.
Let's call it products.
The component takes a dysfunction takes the props parameter and then we're going to return
the template that's going to be rendered.
Let's put a div and inside the div.
Let's make a list after doing the heading h1 products and let's make an unordered list
UL and then let's add some allies.
First one product one and just copy and paste.
I'm going to duplicate the lines and just make it product two and three.
Okay.
Let's not forget to export the file at the end so we can use this component for an external
file.
Okay.
So this is the product component that's going to represent the product's page.
Now just to review what we did, first we created the about.js file to hold the about
component.
We're doing stateless functional component here.
So all we have to do is export a function whose first argument are the props.
We're not using it here but we didn't really have to write it but just so you know that's
the props parameter and then we return a template from this function.
Here I'm using implicit return from ES6.
So this is the same thing as doing this.
So if you are not familiar with this syntax just yet then get familiar.
This is the same thing.
Okay.
So I didn't want to write return explicitly so what I had to do is just remove the return
and remove the braces that define the function block.
This is going to be the same thing.
So I'm returning this JSX block here.
Okay.
Then we went on to create the product's page the same manner in the same manner.
Okay.
Now let's test this out to see if it's really working just one by one.
From your app.js this is the app.
This is the component that gets rendered into the screen initially.
So what I want to do is I'm going to delete all these unnecessary stuff.
Okay.
So actually I'm going to delete everything so we're going to start from scratch so to
see what's going on.
So let's start from scratch app.js.
First we're going to do react and then we're going to need what?
We're going to need to define the component.
The way it was defined before was using a class component.
We can do that just as well.
So let's do it.
Class app extends what?
Extends react component.
Okay.
And then since it's a class component we need a function render.
Every react component has the function render and this function always returns the template.
Okay.
So this is what's going to appear in the screen.
In this case we want to test out if we say about here if it's going to show up or if
we say products if it's going to show up.
So that's what we want to do.
Before we do that let's leave it at that and export default the app down there.
Okay.
Now since we're using about here we need to import it otherwise we cannot use it.
So let's do an import.
What's the name of the component?
We want to call it about.
We want to call it from same directory.
Dot slash the name of the file about.js except we don't need to say .js.
It's okay to omit it.
Okay.
Now let's save this and then go to the terminal.
Let me clear the screen.
We're going to start our app using one of the npm scripts that's defined in package.json
and that's npm start.
This guy is going to power up this react application and open up your browser window with the page.
I'm going to open here the console just in case I want to see any error messages.
So as we can see about this is the about page everything is working just fine.
So let's test out the product.
So let's go to the terminal.
What do we have to change?
We have to change this part.
We want to test out products.
So in the same way just change this about import the products from products and then save
it and see if it changes in the browser.
Please we're using npm start.
This script already includes the hot reloading, live reloading for you so as you make changes
to your files and save them it automatically reloads the react app here.
So as you can see products, product one, two and three they are appearing here correctly.
So everything is good.
We're all good.
We have created the pages for our project.
Now next we're going to look at how to set up the routes using react router in the next
lecture.
Until then, see ya.


0007-02 Creating Different Page Components

Hooking up React Router and Routes

Welcome back. In this lecture, we're going to look at how to hook up React Router and create our routes for the About and Products page.
As you can see here in the screen, we have the About and Products page.
What we would like to be able to do is when we say slash about, it goes to the About page and when we say slash products, it goes to the Products page.
Right now, it doesn't do that, right? If you go to the React app here, tab, and you say, I want to try to go about, and decide to go to products,
it all ends up in the same place. Of course, showing our products because we had tested our products, but let's replace this with, this is the main page.
If we save this, I replace that content with, this is the main page app. If you can see, you can go to products, you can try to go anywhere, and it says right here, we don't care about that.
It says we can try to go any route and it all ends up in the same place, which is the app component. We want to change that.
How can we introduce a routing system using React Router version 3? Remember, we already installed React Router version 3 using NPM.
Now we need only, in part, its components and hook it up. Let's go to the text editor.
We want to go back to that file that injects the application, the app, into the root div. If you go to src.index.js, and we have this called, ReactDom.Render, the app component itself.
Instead of the app component itself, right here, what we want to do is add, make it render the router from React Router.
What I'm going to do is, here, I'm going to import the necessary components from React Router.
We're going to import, don't forget the braces, we're going to need the router itself, and then we're going to need the route.
And then we need some kind of history. There are many kinds. There's a hash history, browser history. Let's get started with the hash history.
Let's start with the router from React Router. First we import the necessary components here, router, the route, and the hash history.
Now let's learn how to use these. Here in the ReactDom.Render, let's break a line for these guys to make it easier to see.
Now instead of app here, we're not going to render that app component anymore. We're going to render the router.
Okay, router. That's from React Router. Now this router, it needs you to tell it what kind of history are you using.
In this case, we're going to use the hash history. So take this guy, and you're going to include hash history there.
So the router is going to use hash history. Now inside, within the router, as is children, you place the routes.
Okay, so we're going to use the route component. Now this route is going to take first where you want it to route to. What's the path?
So you say path, it's the first prop you're going to need.
The second prop is the component that you want to render in that path. So for path, let's say the first one we need the slash about, right?
So we can say slash about in this way. Now the path to this route is slash about.
And when the user tries to go to this path slash about, I want you to render the component as follows.
In this case, we want to render the about component, right? So we say about here. But to use it here, we have to import it.
So let's import about from about, right? Now let's test this out. Let's see if there are no problems here.
So let's remove everything from the URL and go back to localhost 3000.
We can see on warning here react router location slash did not match if I increase did not match any routes.
That's because we did not include a default route there. This route is not defined.
But if we go to about, you can see now it goes to the about page. Okay.
So it works now. But if you try to go anywhere that doesn't exist is going to give you the location error here.
Warning, actually. Okay, so we define the about like this for the main page. Maybe we can leave it as app.
So how can we route the slash like this to the app component? Let's do it together.
Before this about route, let's route. Let's write route. Now what's the path? It's just slash.
Now what component do we want to render for slash? Let's just render app.
Okay, let's save it and see what happens. Okay, this is the main page app. So it's now everything's okay.
All right. Now if you notice here in the URL, there's always this hash appearing right after the host in the part here.
This is because we're using hash history. So hash history makes use of the hash here after the host in port.
Always like this. It's always the hash slash whatever the route is slash about slash whatever products we're going to create it right now.
Okay, so let's get back and create the route for the products page. I want to see you do it.
How about you pause the video and do it yourself. And then we go on together after that.
So how did it go? Everything okay. So let's go in.
We're going to write the route path to products. The component is going to be what products?
Don't forget to close the route here. All right.
Now let's import products since we're using it.
Import product from products. I forgot. Yes. Okay, let's save it.
Now let's test it out. You can see it already worked right away. Let's go to the main page and let's go to slash products.
So now it's working. Now let's go back to about.
Okay, so we have set up react router and the routes for application.
Okay, so let's review what we did.
So to establish a routes.
We went to the place where the react application is injected into the DOM using react dom.rnr.
There instead of the app component, we replaced that with the router from react router.
Now this router needs to know what kind of history you're going to use in this case we use the hash history, which by the way adds that pound sign to the URL.
Then inside the router component as children we passed the routes without an R.
Okay, the route component. This route component takes a path and a component.
So at certain path that is specified, please render this component as such.
Okay, so router component with the route components nested inside with a path and a component.
Okay, hope you have liked this lecture in until the next time.
Bye.


0007-03 Hooking up React Router and Routes

Navigating Between Pages Using the Link Component

Welcome back, how's it going?
So up until now we have successfully hooked up React Router to allow us to go to the slash
about and slash products page, but the problem is we only do that directly through the URL.
Obviously don't want the user to be doing that to navigate between pages, so what we
need to do is to have some links, let's say from the main page that will link to the about
page and to the product page.
Now to do that you could of course create a link that points to the pound slash about
and pound slash products using the anchor tag, but React Router provides its own link
component that we can make use of.
So let's get started.
So let's go to the app component and create some sort of menu that has a link to the about
page and a link to the products page.
So let's go to app.js.
Now in the return value here for the render function what we want to do is before the
attacks this is the main page, we're going to add the links.
So to use a link from React Router, this is called the link component, you do it like
this, you say the link and then you give to.
This too here is a location object, but you can also use a string with the path, for example.
If we want to make a link to the about page we can say slash about, okay, and then let's
give it some content for the link like this.
So link to slash about.
Now since we're using link here we have to import it and we just so import, don't forget
the braces, link from React Router as so.
So this way you are navigating to the about page when you click link.
So let's go and test it out.
From the, you see about there, click the about, you can see it goes back, it goes to the about
page, okay.
If we go back here and click there you can see in the bottom the link to about.
So this is the link component from React Router.
Now I want to see you add another link to the product page using the same manner, in
the same manner, same fashion, let's see it.
So how did it go?
So let's add a separator here with link, I just add a pipe there so we can separate
the links.
We're going to say link, use the component link to slash product.
I'm going to say products slash link, let's maybe add a div so they both stay in the same
place and then just line break before it gets to the this is the main page.
Save it, there you go, about and then products.
There's no space for that pipe, I can add a space here actually, if I do it like this,
there you go.
So actually this should be on a nav, it's more appropriate to use a nav since it's a
menu for navigation.
So we have about and products and I added here this, actually it's just a space followed
by a pipe followed by a space.
Before this, there was no space, there's no way you can add a space there because it's
going to collapse into a single thing so I had to do the this kind of trick to actually
use force it to use a space before and after, okay?
There you go, have about, have products, let's check it out.
Click products, everything working, very good.
Go back, check about, everything working.
So that's great, now we can navigate between pages using the link component.
Alright so let's review what we did in this lecture.
We learned how to use the link component from React Router, it's very simple, all you have
to say is you pass this probe called 2 and in this case the easiest value you can pass
to 2 is a string with the path to the route, okay?
This case to about and the other case to products and that's it.
That's how you navigate to different pages using link from React Router.
Until the next lecture then, bye.


0007-04 Navigating Between Pages Using the Link Component

Fixed Site Menu with Nested Routes

In the previous lecture, we looked at how to create links using the link component for
React Router.
We made this kind of menu with about and products, a link to Browse and products.
This is cool.
It goes to the about page, it goes to the product page, but we always have to click
the back button and that's very annoying.
So what can we do better?
Of course we can.
How about we keep this menu at all times?
So when you click about, you're still going to see the menu about the products up there
and we click products, the same thing is going to happen.
You're still going to see the menu.
How can we do that?
So to be able to do that, we're going to use nested routes.
So let's do it like so.
So this is the app component, right?
App component stays the main page and contains this menu.
So what we have to do here is here, after this message, this is the main page, we are
going to inject the page, the new route, the content right there.
So we're going to have nested routes.
We're going to have the app and then inside the app component, we want to be able to have
the about or the products component injected right here.
To be able to do that, we have to use nested routes.
So let's go back to the text editor.
So this is the main component, right?
So here, this is the main page, here is the content for the selected router page, whatever.
So I put this text here.
So we want to be able to write here to either render about or you want to render products.
Okay?
Depending on what the route is.
So this is our goal.
So to do that, let's go back to the src slash index.js file.
This is where we have our routes, right?
So you can see they have routes.
The slash route is separate from the about route and products route.
So what we have to do is nest these two routes inside the slash route.
Okay?
So that's the first step.
So let's get rid of the closing slash there and actually allow route, this route slash
route to receive children.
Okay?
So we do it like so.
And then we're going to take all these two routes about and products route and we're
going to move it inside the slash route like so.
So now it's nested, right?
So we have these two routes nested inside another route.
Okay?
Now when you do this kind of nesting, React router is going to allow you to choose which
one you want to display.
So when you have this kind of thing, these routes, whichever one is chosen, depending
on what path you have, will be injected into the component, in this case, app component
as children.
Okay?
Children, that's important.
Okay?
Now once you hit the slash about, for example, it's going to go through, it's going to render
app and then we're going to make something inside app, we're going to write something
so that it also renders the about page at a specific location.
This case at the end, after that message, here's the content.
Okay?
So let's get back to the app.js and make it happen.
So here we are.
This is where we want the specific content, specific component to be rendered.
It could be products, it could be about.
Now what we're going to do is we're going to write like this, open braces, this dot
props dot children.
Okay?
We're going to take the children that's passed to this component app and that's going to
work out because the way React router works there and the routes are laid out, we have
nested routes.
So it's as though you take the app component and then you go down all these routes and
you look for the path that matches your path.
And then the path that matches you take the component, pass it to app as children and
it's going to appear right here.
Okay?
Let's test it out.
So let's go.
Here we are in the slash, right?
So let's go to about.
See what happened?
About is now showing up here.
Now let's go to products.
Click products.
Show us up down here.
Okay?
So this is nested routing and this system allows you to have a main content right here that
changes all the time and you have a fixed manner up in the top.
You can add a footer and many other things.
So basically this is the most basic thing you're going to have.
So it's a must for any application and website that uses React router with React router.
Okay?
Let's preview what we did in this lecture.
So we wanted to be able to render the about, the content from the about page or the content
from the product page right here on the main page except down there.
So we wanted to keep this menu at all times no matter what page we're in.
So what we did was we nested the about and product routes inside the slash route that
has under the app component.
So we nest these guys and then we have to get access to these components from the app
component itself.
And the way we do that is through the props.children.
So the children prop is injected here.
Since we are placing these two routes as children of this route slash route we have access
to them to the chosen one.
So React router goes through the nested routes and goes through each one starting from the
top and if it matches the path say our path is slash products and it starts here it looks
slash about okay this is not a route so I'm going to skip it and go to the next one.
And then go slash products is this a route yes it is so we match so we take the component
injected to the app as props.children and it finally appears here in the app component.
Okay very important to use this guy this props.children don't forget otherwise it will not work.
Alright so that's it nested routes now we got a nice manual up in the top and we can
change pages.
Thank you so much for watching hope you liked this video and subscribe if you are not already
my subscriber and until the next time bye.


0007-05 Fixed Site Menu with Nested Routes

Defining the Initial Page Content with IndexRoute

Hello everybody, welcome back. So now that we have a menu, a fixed menu, and we are
able to change routes, there's only one thing that's kind of funny here. If you
go to slash and there's no content, right? Because, well, there's no page for that.
We didn't create anything. If you go to about, there's something down there.
You go to products, there's something down there, but if you go back to the
initial page, the slash, there's nothing. Well, that's okay if you don't want anything
to appear there, but if you do, then we are going to learn how to display the
default page right there, and that's called the index route. We're going to use
the index route component from React Router. So let's get to work. It's very
simple. So all we have to do is like so. So here we have the route that has
nested routes, right? But since slash does not match any of these, so nothing's
going to appear in that props.children area here from the app.js
component. Here's app.js. The app component render method, return value. Now if you
want something to appear, if you go to slash, you have to add what's called the
index route. Okay, so if you had this index route and you want some kind of
initial page to appear, you just say like so. Index route component is whatever you
wanted to appear. Let's create a new component to be the index route. How
about we say, I don't know, let's call it main. And then let's create this component.
Let's go to SRC and create a new main.js component. And let's proceed as before
import react from react to be able to use asex. Let's define our main component as
a stateless functional component takes props. I'm going to omit it if you want to
add props there, free to do so. And we're just going to say this is the initial
page. Welcome. Just going to have a simple page. Let's not forget to export
default down there. Now back to index. We are using main but we have to import it.
Don't forget import main from main. Now let's remove this warning right here
before we move on SRC slash app.js as a warning, because I'm not using products
anymore. So let's remove that. Okay, so I'm apt.js have removed that import
products. We don't need it anymore. Now back to where we were before, we created
main.js. And then we import it and then we added it as the index route for the
slash. Now let's see what we have index route is not defined because we forgot
to import it. So let go back there. Index route is part of the react router.
Module so add index route here. Port next route on react router and there you go.
We are in slash and you see this is the initial page welcome. If you go to about
it changes products changes and back to slash. This is the initial page welcome.
Okay, so this is how you define a initial page for that app that is has
necessary routes. Once again, let's review. It's very simple to define an
initial route for this route that has necessary routes. In this case slash if
you want something to appear that just add an index route with the component
that you want whose content you want to appear. Okay, that's all. If you like the
video please click the like button and please subscribe if you're not already
my subscriber. Until the next time then bye!


0007-06 Defining the Initial Page Content with IndexRoute

Accessing URL Parameters using React Router

Hello everybody, welcome back. In this lecture we're going to learn how to deal
with URL parameters with ReactVouter version 3. So back to our wireframes
kind of thing here. We have the about page and products page. How about to
create a third page? That's going to be the product profile page. So typically
these pages, when you click product one or product two or whatever, it goes to a
route something like slash product slash the actual product ID. Say it was product
one has a product ID one, it would go to slash products slash one, right? And
product two slash two and so on. So this is actually going to be a URL route
parameter. Okay in ReactVouter they call it a URL parameter. So a parameter, this is
the parameter we're going to define in our route called product ID. So based on
this product ID we're going to be able to display it in the page, some message or
whatever. This is the product profile page for the product ID with ID whatever
you type in the URL. Obviously you wouldn't do these simple things here. The
product ID would be more useful to make a HP request using that product ID, that
kind of stuff. You get it what I mean, right? So let's learn how to access those
URL parameters and how to define a route that takes URL parameter. So let's
first start off with this product profile. Let's make it really simple as
before. So let's go and create under the SRC directory, create a file called for
productprofile.js. Let's keep it simple and just use a stateless functional
component. So let's do const product profile props. Actually in this case I'll
want to just use this other way. Don't forget to import React from React because
we will be using JSX inside of return here. So let's do a div with just a
message saying whatever we said there. This is product profile page for the
product with ID. The product profile page for the product with ID whatever we
don't know it yet. Something that to be completed. Alright XYZ. So let's export
default at the end. Product profile. I forgot the heading. If you want to add a
heading. Better profile. Something like that. Now let's test this out. We can go
to app.js and actually we don't need to test it out. We can just go straight to
the routes and add this route. So we're gonna add a new route here under
products. We're gonna say let me type it route. What's the path? Slash product. Slash.
Oops. How do we define parameters? Oh that's easy. Just put a colon. Product ID.
If you define this. Say product ID preceded by colon. React route is gonna know.
Oh you're talking about URL parameters. So I'm gonna take this as a URL
parameter. That could be anything. Okay anything. What the component is. Product
profile. And let's import it. Import product profile from same thing. Okay so now
that we have that. Let's try it out. In the browser. See nothing happened. Let's
try it out. Slash products. Slash three. You can see now see product profile page
here. And we added a URL parameter three. Okay and it worked just fine. If I remove
the three what happens? Oh it goes back to products because there's no longer
anything here. So it's going to the products page slash products. Now I said
before that the URL parameter could be anything. So if I say whatever it's gonna
go to product profile. So be careful of that. Alright. Now we want to be able to
show this ID here in place of this x, y, z. So to be able to access it we're gonna
use the parameters object that is injected by react router into our component. So let's
let's have a look. Let's go back here to product profile. Let's go back to product
profile. And right here we have x, y, z. Let's substitute that with the value from
a variable. So we're gonna say props dot prams. This is the object that holds those
URL parameters. Okay. We're gonna say product ID because we define it in the
route to be product ID. Let's save it and see what we get. You can see it already
changed here. If I change to 9876 it changed here automatically. So that's how
we access the URL parameter using react router. We're going to use always this
parameters object. It's injected by react router. Okay. By the way if you want to know
what props are injected by react router it's simple. Go to your app.js. Now here before
you return something from the render method just do a console log of all the props that you have.
So let's take a look at what props are injected into our app component. Do a console log of this
prop. And let's have a look. Here's the console and you can see the many props that are injected
but particularly we saw that prams is injected by react router and it's passed on to the children
this case product profile. You can see right here product ID. You notice it's a string because it's
on the URL parameter which is a string itself. So be careful when you work with numbers
and you need them to be integers or whatever make sure to parse into this guy.
And there are other things injected by react router. There's the router object here. You can see routes
and other stuff route parameters whatever location. This is what's going to be very useful later on.
You see query here. That's what I'm talking about. We're going to talk about that later.
Okay. So that's how you see what it properties properties are injected by react router.
Now we're coming to the end of the lecture just to review again. We're we added this new prop to
see the profile page and we added a pram to the URL route so it can be anything here and it's going
to show up at props.params. whatever you call in this case product ID. Okay. Inside the product
profile. So with that we are able to access that value using props pram.product ID. Okay. Thank
you so much for watching. Please like the video and subscribe for not already my subscriber. I
appreciate it. Thank you very much for watching and until the next time. Bye.


0007-07 Accessing URL Parameters using React Router

Using Query String Parameters to Filter Product List

Welcome back everybody.
Let's get back to learning about React Router.
In this lecture, we are going to learn about query parameters, the so-called query strings.
They're the parameters that we add to the URL that start with the question mark.
So for example, let's change our product page here, this on the right hand side here, to
add this order query string, query parameter, that's going to change the order of the product
list.
So if we say order descending, the list is going to appear in descending order, like
the product name, for example, if I put descending, then this guy would be reordered and sort
it like, oops, not this, it's descending, right?
So it would be, the ABC would be, would be the last one, the DEF the first, BCD the second,
and so on.
And the same thing would be the opposite of our car, if we set ascending, okay?
It'll be the reverse, the list would be reversed.
So that's what our goal is, how to access this query parameter from our component.
So in order to get this to work, first we got to change a few things in the product page,
okay, the products component, we're going to have to extract each of these product names
into an object, into a list of product names, so that we may apply this filter.
All right, so let's take care of that first before we actually learn how to get the query
string value.
So let's go to the products.js file, this is where we define the product component, right?
So right now we have hard coded product one, two, three, whatever, let's change the name
to ABC, BCD and DEF.
So let's get back to what it was before here.
I think I had ABC was it first, so ABC, DEF and BCD, so ABC, DEF, BCD.
So let's get these guys out into a list.
So what I'm going to do is I'm going to define the function block explicitly because we could
only return, we can't do anything else.
So let's add the return value, the return keyword there, like so, and then before we
turn, let's create a list, let's say product, product list or whatever you want to call
it.
So let's make a list and add all these names there.
So let's extract this guy followed by DEF followed by BCD.
There you go.
Let me see this.
Now we have a list of products, or ABC, DEF, BCD.
Now let's get this to work with this.
So before we had the hard coded LIs, now we have to generate an LI for each item in this
list.
So we're going to do a mapping operation right here.
So we're going to say product list, non-map, a product to what?
We're going to map that to an LI.
That includes the product itself, it's the product name actually.
We call it the product.
Like so.
This is going to work just the way it was working before.
Let's make sure there are no errors.
Let's go back to the products page and test it out.
As you can see now, oops, what's going on?
So everything is okay, product, ABC, DEF, BCD.
And there's a warning here.
Each child in an array or iterator should have a unique key prop.
This is from React.
Whenever you do a mapping operation, we have to add a key prop to each of these guys.
Like here, a key or whatever.
It has to be something unique.
Usually it's the ID of the product or whatever, but here since we...
Let's assume the product name is unique, so I'm just going to put the product as the
key just to get rid of the warning.
Okay, let's refresh.
No problems.
Make it a little smaller.
There we...
Okay, so we have these guys extracted into a list.
Now we can do filtering operations if we need.
Okay, now let's learn how to access that query parameter.
Say we want to order all these product names by descending order.
Like so.
Right now nothing happens, right?
So how do we access this guy?
Well, remember we had a console log of the props for the app component?
Look here.
Let's take a look at these props.
There's nothing to params because there's no URL params, but if you look at location,
this object here and you look at query, look what we have found.
Look what we found here.
Descending.
So this guy is actually this guy.
So it's inside a query.
It's inside a location object.
All right, so this guy is how we access it.
So let's first make an if statement here before we turn.
So we got a product list in its original form, but if the props.location, right?
Location.query.order, right?
If this guy is descending, then we are going to do what?
We're going to take the product list and we are going to sort it and reverse.
Like so that it appears in descending order, right?
Right now it's not sorted because ABC is coming right before Df, but Df should be the last.
So we have to first sort it.
So let's do product list.sort.
Then after sorting it, we can reverse.
Notice that this sort of operation JavaScript, this function is going to modify the original
object.
So be aware of that.
The same thing for reverse.
So both of these operations are in place and will change the original.
Okay, now let's save it.
I forgot to detail in the if statement if you already know.
I'm going to talk about it later.
So you see now it's sorted, descending.
Product ABC is the last and Df at first with BCD in the middle.
So actually this is working.
It checks the props.location.query.order to see if it's descending.
Now let's remove this order, this query string.
Let's see what happens.
So we have ABCD, FBCD.
So let's take a look at the props here.
We have prams, we have location, and the query does nothing query.
So the moment you try to access .order, this guy is going to be what?
Undefined.
So that's why this condition is failing.
Which is actually what we want.
We don't want to do anything if that fails.
So that's actually okay.
So no problems there.
Now if you do descending again, it orders it and descending order.
Now if you do ascending, how do we do it?
If we want to do it ascending.
Now it's wrong, right?
Because it didn't do anything.
Df should be less.
Now I want to see you do it.
Now let's add an elseif here.
And like in the same way, and just sort the product list.
You don't need to reverse it because it's ascending.
Let's hear you do it.
Let's see you do it.
So how did it go?
So we add an elseif, props location, query.order.
If this guy is ascending, then we just need what?
Sort it.
Sort the product list and that's it.
Save it.
Now let's test it out.
Sending ABC, BCD, and DF, correct.
Let's remove the query string.
Let's put nothing there.
Now it's back to its original form.
Let's put descending.
Now it's descending.
So everything is working now.
So great.
So that's how we access query strings using React Router.
So let's do a review.
So what did we do here?
So first we had to extract each product name into a list so that we may apply the filter
based on the query string.
So to access the query string we use props.location.query.name of the query parameter.
That gives you the value that was typed in the URL here.
In this case, order and the value is ascending.
So we use that to determine whether we want to sort the list in descending or ascending
order.
All right so hope you liked this video.
Please click the like button.
And don't forget to subscribe if you're not already my subscriber.
Thank you so much for watching and until the next time.
Bye!


0007-08 Using Query String Parameters to Filter Product List

Using the history Object to Programmatically Navigate to a New Route

Welcome back everybody.
So we've learned a lot of things so far about React Router version 3.
Now before we learned how to navigate between pages using that link component, right?
Now how do we do that programmatically?
That is how can we type some line of code and that statement will cause the route to change.
Now that's what we're going to see in this lecture.
So there's two ways of navigating programmatically in React Router version 3.
The first way is you can use the push method of the history object itself directly or you
can use the router prop that is injected into your component.
Okay, we're going to look at both of these.
So let's get to work.
So let's go to the main page for example.
This is the initial page welcome.
Remember we go back here to the browser to yeah, I should have added a link to the main
page.
That's a good exercise for you.
So this is the initial change welcome whatever.
Let's say we have some button here that goes to the product page.
It's going to be pretty much redundant, right?
Because we already have a link here.
So let's say we don't want to do the navigation using the link component.
Instead we want to do that in actual code like the programming statement.
So let's add a button here that's going to go to products.
It's going to be redundant but it's just so we learn how to do this.
So let's not use link but actually make a button that when you click it's going to
call a function to actually change the route.
So let's go.
Here in main let's add a button here.
Click here to go to products.
Yeah, great.
So I'm going to break the line here so you can see better.
Click here to go to products.
So I added a button here, button type button.
Click here to go to products.
Let's add a div so it breaks the line there.
So we don't have to add a br.
There you go.
Click here to go to products.
So what we want to happen is that it goes to the actual products page like so.
So the button has the on click, right?
And click prop that you pass a method that is going to do whatever you want when you
click the button.
Usually the method has, let's define it using an arrow function like so.
For now let's just do a console log.
Click to see if it's actually working.
So let's click the button.
I see it fire here.
You can see it says clicked.
Now instead of clicked I want to change route.
So the first way of changing route is using the history object.
Now what history are we using?
If you go back to index.js remember we're using hash history.
So the thing is you have to use the history that's being used for the router.
So you have to import hash history specifically in this case.
So let's import hash history in this file from react router.
And then we finally use hash history here and we're going to call the push method of
hash history and we're going to pass the actual route to the path.
In this case products like so.
All right.
I don't need to return anything.
I'm just returning this explicitly but it doesn't really matter.
I don't need the braces for the method because I just have one statement with implicit return.
So let's see if it works.
Click on products.
So it goes to products.
The CD URL has changed.
All right.
So if you go back click again it's working just fine.
So this is how you change route programmatically using the specific history.
Now the problem with this is what if your app changes the history like you're like here
we didn't talk about this before but if you have other kind of history like browser history
and then if you want to change route here then you're like you have to change every single
statement that uses hash history to browser history.
So that's not really cool.
That's why I don't like this method that much.
There's one workaround for this and that is you define a file that exports the specific
history in this case like you're using hash history here right.
So you can export that hash history as an object called history and you can change it to be
whatever you want.
Let me show you.
So we're using hash history here right.
So for example let's create a file history.js.
So in this file we're going to import hash history from react to router and then all
you have to do is export.
You can use the file or you can use the braces whatever.
I'm going to use default.
So what I'm going to do is I'm creating an alias for this guy as history.
So I'm going to import the hash history but in my code just use history.
So I'm going to export the file history here.
So like so and then index instead of saying hash history here I'm going to put just history
and I have to import that history like so import history from history in this way.
Now let's see if this is working.
Let me go back to main and let's for now remove this push and put no.
Just for now.
Now so I define a file history.js that simply imports the hash history in this case as history
it just changes the name and it exports the fault that.
This doesn't really matter I could have just said hash history here.
Alright anyway.
Now from the index where we actually pass the history to the router we are passing our
history custom history module and that should be have the same effect as before so let's
test it out see nothing bad happens.
Click product click about everything is okay right so no problem there.
Now say I want to change my history to browser history how would I change it I just need
to change it here right.
I change the browser history here in my history.js and that's all.
Now let's test it out you see there's no more hash there because we're using browser history
go to about go to products you see it's working just fine.
Okay so because of this now we can use finding us back in main.
So instead of saying hash history here I can say just history and actually import that
history that we define.
Like our module custom history so we just say history that push products and it should
work just fine let's test it out go to the initial page now this button should trigger
the slash products everything's okay so you know hash now if I want to change my history
now I don't want to browse the history anymore let's revert back to hash history go to hash3.js
now it's hash history.
Notice main is unchanged we didn't need to have to change any history statement at all
now if you go back here you see now there's a hash there go to products there's a hash
so we got around that problem all right define your own custom history module very very simple
approach.
Okay so that's how you change route programmatically using the history object history.push and you
put the path here.
In the next lecture we're going to look at how to programmatic navigate using the router
object that is passed via props.
See you then.


0007-09 Using the history Object to Programmatically Navigate to a New Route

Using the router Prop to Push a New Route

In the previous lecture, we looked at how to navigate to another page programmatically
using the history object.
We learned how to make our own custom history module so that we may change the history from
hash history to browser history and vice versa, anytime without changing any of the statements
in our application.
Now let's learn how to change route using the router prop that is injected into our
component.
Remember that in app.js we had a console logout of this.props.
So let's take a look at that one more time.
I'm here, I'm going to go to the initial page and let me clear the console and try again.
So here's the object, right?
So the props object, we receive many props.
App component receives many props here.
One of the props is called router.
And this router provides many methods that are useful for you to change routes and so.
What we're interested in is to change another route.
This method called push.
Okay, so we're going to push a location.
Location can be as simple as a string with a path.
Okay, so let's take a look.
Go back here to the main.js file.
We're using history.
Now let's use this.
Actually let's use props.
We have to define the props here.
So main takes props to the parameter and then we're going to use props.router.push.
So the router is injected via props.
You receive that prop called router that has a method called push.
It's pretty much the same thing as we did with the history push method.
So save it.
Try it again.
There you go.
Products, no problem.
All right.
So that's how you programmatically change route using the router prop.
Very simple, right?
So this approach is even simpler than having to import the history and having to define
that history module.
So depends on you which one you would like to choose.
I think one advantage of using the history approach is that you can import it from any
file and you can use the history.push.
Whereas the router prop is only injected to the app and in this case to the main component
but it is not available to the children component of those guys.
That is you would have to actually pass them down to those children of main or main component.
Okay, so that's one of the things you have to watch out about.
But for the most part I would use props.router because usually in my approach to making React
applications I usually have an outermost component that includes the router prop and
that component is the only guy responsible for switching routes and so on and so on.
Programmatically it always takes care of data stuff and that usually boils down to only
using the router there and not in the children.
Usually I pass those.
The children call some methods like send some sort of alert that bubbles up to the parent
component, parent most component and the parent most component does the props the router push
kind of thing.
Alright so I hope you liked the video and please subscribe if you're not already one
of my subscribers and please click the like button if you liked it.
Thank you so much for watching and I am associated on Twitter.
My Twitter handle is nbkhope.
Let me show it to you real quick.
So I'm Twitter as nbkhope.
Let's connect there.
Please follow me and thank you so much for watching until the next time.
Bye.
