React Flux: Routing with react-router-component

[00:00] Hey, guys. In this video, we are going to take a look at adding some routing to our Flux application. Now, React does not come with any built-in routing, but when we started our project, we actually installed something called "React router component."

[00:13] We're going to go ahead and use that here in our app component. I'm going to say var route equals require React router component. We can do this a couple different ways. What I'm going to do is isolate a couple methods or objects from our router.

[00:31] Router.locations, and we're also going to need another one just called location, not pluralized, router.location. We're going to use those right here in our render. The way we're going to do this is we are going to wrap everything in a template component.

[00:51] We'll create that in a second. We're already got it stubbed out from a previous video. The way we use React router component is we start off with our locations, and then inside of that, we call a location. Now, each of these location components is going to have a path, and it's going to have a handler.

[01:13] The handler is our component that we want to render at that path. Our first one is just going to be our root path, and here, we're going to render our catalog component. Our next one is going to be our cart path, and here, we're going to render our cart component.

[01:32] Our last one is going to be for our item details. This is going item: .item. Our handler is going to be catalog detail. This colon item ends up getting passed as a prop to the handler, which in this case is catalog detail.

[01:54] We need to get these other components on the page, var catalog detail equals acquire catalog item. Then, we're going to need our template, just app template.

[02:07] Now that we've that in place, let's go ahead and jump over to our app template.

[02:12] In our template component, we are going to need React, and we're also going to need our header component. Here in our return, I'm just going to drop in a bit of HTML. We've got a div with the class name of container, just bootstrap.

[02:29] Then, we've got our header component, and then, we've got our this.props.children. That means anything that's passed into this component will render right here. The children that are being passed in, we can see in our app, is going to be one of these components, catalog cart or catalog detail.

[02:49] Jumping over to our header, we are going to require React and our cart summary components, and once again, here in our render, I'm just going to drop in some HTML. We've got a row, we've got a column with our let's shop header.

[03:12] Over to the right, we've got our cart summary component. In our cart summary component, we're going to require React, and we're also going to be bringing in the link component from our React router component.

[03:27] Here, we're going to be dropping in a div. Here, we're going to use our link component. It's going to have an href equal to /cart. It's going to have a class name of button and button-success, which is just some bootstrap. We're going to get a nice screen from that.

[03:46] We're going to close this guy right here, and our inner HTML for now is going to just be cart items, quantity/cost. We'll take a look at that later. We'll save that. Since we instantiating our catalog item component, we're going to go ahead and drop in a require React, and we're just going to leave that be for right now.

[04:09] We'll load that up in the browser, and we in fact getting some sort of error here. Let's see, we've got a parse error on our app header, line 14. Let's take a look at that header. You know what? We need to close this div right here.

[04:27] Try that one more time. We'll load this up again on the browser. We are getting another error. Router is not defined. Let's check that out in app, and this should be router, not route. Let's load this up one more time.

[04:48] We've got our two routes. We can add our widget a few times, and we see that over here. We could remove it, and we'll go back, add a couple of these guys, jump to our cart, and everything seems to be working as expected. We've got our first two routes, and now, we can continue fleshing out the rest of our application.