Building a React.js App: Transitions with React Router

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

Thanks Philip! Dang breaking changes.

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?

Getting - this.transitionTo is not a function

I'm getting the same error.

The lesson video has been updated!

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?

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

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

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

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.

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

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

using 2.0.1 context router worked for me https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#navigating-inside-deeply-nested-components

For those that are doing this example on the latest version of react-router (2.0.x) which breaks this example, and apparently Mixins are officially deprecated (You get either error: [react-router] Router no longer defaults the history prop to hash history. Please use the hashHistory singleton instead. or [react-router] the History mixin is deprecated, please access context.router with your own contextTypes), I fixed this with in 2 ways:

Change app.js's render content to <Router history={hashHistory}>{routes}</Router>, and instead of using a mixing to navigate on SearchGithub.js , do:

var History = require('react-router').hashHistory;
{...}
History.pushState(...)

I really wish Tyler gave his opinion on this and the right way to do this on react-router 2.0.x. I think you can also do this with Contexts (but I haven't reached that point yet and this was the easiest solution at the time). Feel free to read more about this here: https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#hashhistory

I tried the example. It says 'Cannot read property 'isRequired' of undefined'. Router.PropTypes doesn't have a 'router'.

I just ran into these issues and I wanted to thank you for hinting at a solution Sergei ! I ended up implementing a slightly different solution, hope this helps others save some time debugging.

-changes to your App.js file

import { hashHistory } from 'react-router'

ReactDOM.render(
<Router history={ hashHistory }>{routes}</Router>,
document.getElementById('app')
)

changes to your SearchGithub.js file (import statement goes along with your require statements): ... import { hashHistory } from 'react-router'; ... hashHistory.pushState(null, "profile/" + username) ...

This worked for me.

Nice marlonjfrausto, I found this really helpful for getting a few more bits of detail. https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating

My handleSubmit function that works nice with React-router@2.8.1

e.preventDefault() will stop page from full reload that happened on chromium.

handleSubmit(e) {
    e.preventDefault();
    const username = this.usernameRef.value;
    this.usernameRef.value = '';
    Router.browserHistory.push(`/profile/${username}`);
  }

Jason Do you need to make any changes to App.js to get this to work? I don't follow why this.context.router is defined in the component scope, can you please help me understand? Also is it possible to use <Link to = "" /> and if so what is best practice (and why?)? Thanks!

I'm seeing this error (Uncaught TypeError: Cannot read property 'pushState' of undefined) with the following line of code in SearchGithub.js: "this.props.history.pushState(null, "profile/" + username).

Was there a solution given to this. My code is exactly like the solution code in github.

WOW, just like that I solved my issue. In SearchGithub.js: Replace: "this.props.history.pushState(null, "profile/" + username)" with this: "hashHistory.push(/profile/${username})"

Thank you! This fixed my problem :)