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

Building a React.js App: Transitions with React Router

Building a React.js App: Transitions with React Router

5:30
In this video, we’ll walk through how to use React Router to transition from one Route to another while passing that new Route data via route parameters.
Watch this lesson now
Avatar
egghead.io

In this video, we’ll walk through how to use React Router to transition from one Route to another while passing that new Route data via route parameters.

Avatar
Ming

I found an issue with the state of the notelist component. When I transition the route to /profile/username from the github search bar, the first time the note list was updated from the firebase. But the second time when I type in the username in the search and the note list does not get updated. It remains the same for the last username. I need a way to refresh the note list component so that it reads the notes for the new username. Do you know how to do this? Thanks.

In reply to egghead.io
Avatar
Tyler

Ming, I'd check out the source code in the github for this specific video. I'm fairly confident I'm not having that issue in my code. Check specifically the componentWillReceiveProps life cycle method of this component. https://github.com/tylermcginnis/github-notetaker-egghead

In reply to Ming
Avatar
Ming

Thanks a lot, Tyler. That componentWillReceiveProps function was missing from my code and that did the trick! I watched this video a couple times and I didn't find that piece of code in there. Maybe you mention that in the following videos but I haven't gone through them. I checked out your code and found you use ES6 class syntax. Do you reckon I should use ES6 syntax or keep using the plain old functions and prototypes? ES6 class syntax does look more familiar to me from OO perspective. Thanks again for your super useful hint and the code.

In reply to Tyler
Avatar
Tyler

You probably checkout out the master branch, which is just the latest video in the series. If you keep watching you'll notice I refactor from ES5 to ES6 to show how it's done. I actually still use createClass in a lot of the projects I do. It just feels nicer and there are some things I don't have to worry about.

In reply to Ming
Avatar
Daniel

The tutorial does have an error, where Ming pointed it out. The branch on github does not include proper code to unbind the firebase DB and 'notes' state upon receiving props. code to add:

Add to Profile.js:
init: function() {
var childRef = this.ref.child(this.getParams().username);
this.bindAsArray(childRef, 'notes');
},

componentWillReceiveProps: function() {
    this.unbind('notes');
    this.init();
},
In reply to Tyler
Avatar
Philip

Hello. Nice tutorials, thanks Tyler. I believe getDOMNode() is deprecated and replaced with findDOMNode(). Just thought I'd let folks know :)

Avatar
Tyler

Thanks Philip! Dang breaking changes.

In reply to Philip
Avatar

Hi Tyler, thanks for the great lessons!

I'm having some issues with routing transitions (lesson no. 8). The js console output this error message when I focus on the search box in the top navigation bar (the SearchGithub component):

Warning: No route matches path "/profile/". Make sure you have <Route path="/profile/"> somewhere in your routes

I've tried to edit the routes.js files to get something like the following, but it doesn't solve the problem:

<Route name="/profile/" path="profile/:username" handler={Profile} />

If I manually change the URL to /profile/anyusername the Profile component is rendered properly, so I guess the problem is with the transition.

Do you have any idea?

In reply to Tyler
Avatar
dcarterjs

The componentWillReceiveProps is definitely not in the video nor in the example code up to this point.

In reply to Tyler
Avatar
Alex

Getting - this.transitionTo is not a function

Avatar
Chris Kihneman

I'm getting the same error.

In reply to Alex
Avatar
egghead.io

The lesson video has been updated!

Avatar
Zach

two questions:

First one is how do we get the enter event key to work automatically when we use the search bar in our main component to work right off the bat, but when we use the submit button on notes the enter button doesn't work, how would we implement this so when the user hits enter on his keyboard it triggers submit? and how come it just worked with our search submit ?

second questions is related to lesson 8 transition, once we hit submit and on the profile page, the search no longer works if we are on /profile/whateveruser, instead it adds another profile/whateveruser in addition to our current url, ex url /profile/whateveruser/profile/whateveruser, how do we update that so when we are on a certain profile we can still use the search box?

Avatar
Jeremy Zilar

Question about capitalization:
Why do you capitalize your filenames and folder names?

Avatar
Tyler

Just convention. I capitalize components and hence capitalize the file they go in.

In reply to Jeremy Zilar
Avatar
Tom Warhurst

I keep getting "Uncaught TypeError: Cannot read property 'value' of undefined", does anyone know what's wrong?

Avatar
Tyler

Have you checked your code against the solution branch? (https://github.com/tylermcginnis/github-notetaker-egghead/tree/08-transition) Also make sure all your versions match as well.

In reply to Tom Warhurst
Avatar
Jin

Router.History mixin has deprecated, wonder what;s the best way to do it now, push to browserhistory or conext router?

Avatar
Tyler

You can check out the changelog between React Router 1.0 and 2.0 here

In reply to Jin
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?