The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Flux: Routing with react-router-component

React Flux: Routing with react-router-component

5:10
By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.
Watch this lesson now
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, QUICK QUESTION!
Joel's Head
Why are we asking?