This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Flux: Routing with react-router-component

5:10 React lesson by

By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.

Avatar
Jason

I've been following along with the series building the examples myself, but when I got to this one I get the following error in Chrome:

Uncaught TypeError: Cannot read property 'ref' of null

So I tried the supplied exercise files but then I get this error:

Uncaught TypeError: Cannot read property 'props' of undefined

Any chance you can help please? Thanks.

In reply to egghead.io
Avatar
Todd

Have you tried running the source code that is downloadable from this page?

In reply to Jason
Avatar
Delchina

Tried code not working.

Avatar
dave

Hi

It doesn't look like the complete source code is available here.

In reply to Delchina
Avatar
dave

the following link might be useful, github.com/STRML/react-router-component/issues/32; But I cannot fix the error. Could someone at egghead look into this please , I really enjoy these videos and want to learn more about routing

In reply to dave
Avatar
dave

And yes I am running the source code

In reply to dave
Avatar
dave

OK I found my error, I was being lazy and opening dist/index.html in browser.
For anyone else stuck like I was install a command line server e.g.
npm install --save-dave http-server ( or one of your choice)
cd to dist directory
at prompt type 'http-server' to start server
should listen on port 8080
In browser go to
http://localhost:8080

In reply to dave
Avatar
Stephen

Awesome, and thank you.
I can only guess how many hours this saved me.

In reply to dave
Avatar
Nicolas

I've been having the same issue as Jason. I followed the lesson step by step and can't get it to serve up. I get this:

Uncaught TypeError: Cannot read property 'props' of undefined

from my main.js file

Any help would be awesome. Thx guys!

Avatar
Faria

edit...nevermind. I needed to run the http server from within the dist/ directory so that the urls match the actual routes.

I'm getting the error: Uncaught TypeError: Cannot read property 'ref' of null from main.js:1177 which is in RouteRenderingMixin:
props = assign({ref: this.state.match.route.ref}, props);

However, if I comment out the line {this.props.children} in app-template.js, then I don't get any errors, and I can see the Header and CartSummary components are rendered.

Avatar
Darren Corbett

Dave you're a star was just about to throw a fit coz I couldn't get this bit to work....

thanks Darren

In reply to dave
Avatar
Nick

Thank you- I have been doing the same throughout the tutorials up until now. One thing I haven't been able to figure out though, is why my paths are not matching. Did you run into this as well?

In reply to dave
Avatar
Nick

I can't remove my own post, so I might as well post the solution:

I was running http-server from my (project)root folder. Should have started it in the /dist folder.

In reply to Nick

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."

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?