title: componentDidMount not called
body: <p>I have a component that does not appear to be firing the <code>componentDidMount</code> event. The component is a parent that is accessed using react-router Link via another component.</p>
  
  <p>here is my list component and the child components:</p>
  
  <p><strong>CoursesPage</strong></p>
  
  <pre><code>import React from 'react';
  import CourseList from './CourseList';
  import CourseApi from '../../api/courseApi';
  
  import {browserHistory} from 'react-router';
  
  class CoursesPage extends React.Component {
      constructor(props, context) {
          super(props, context);
          this.state = {
              courses: []
          };
          this.redirectToAddCoursePage = this.redirectToAddCoursePage.bind(this);
      }
  
      componentDidMount(){
          CourseApi.getAllCourses().then(coursesData =&gt; {
              this.setState({ courses: coursesData });
          }).catch(error =&gt; {
              throw(error);
          });
      }
  
      redirectToAddCoursePage() { browserHistory.push('/course'); }
  
      render() {
          const courses = this.state.courses;
          return (
              &lt;div&gt;
                  &lt;div className="page-header"&gt;
                      &lt;h3&gt;Courses&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;input type="submit" value="New Course" className="btn btn-default btn-toolbar pull-right" onClick={this.redirectToAddCoursePage} /&gt;
                  &lt;div className="panel panel-default "&gt;
                      &lt;div className="panel-heading"&gt;
                          &lt;span&gt;&amp;nbsp;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;CourseList courses={courses} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;        
          );
      }
  }
  
  export default CoursesPage;
  </code></pre>
  
  <p><strong>CourseListRow</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import CourseListRow from './CourseListRow';
  
  const CourseList = ({courses}) =&gt; {
      return (
          &lt;table className="table table-hover"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Id&lt;/th&gt;
                      &lt;th&gt;Title&lt;/th&gt;
                      &lt;th&gt;Author&lt;/th&gt;
                      &lt;th&gt;Category&lt;/th&gt;
                      &lt;th&gt;Length&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  { courses.map(course =&gt; &lt;CourseListRow key={course.CourseId} course={course} /&gt; )}
              &lt;/tbody&gt;
          &lt;/table&gt;
      );
  };
  
  CourseList.propTypes = {
      courses: PropTypes.array.isRequired
  };
  
  export default CourseList;
  </code></pre>
  
  <p><strong>CourseListRow</strong> </p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import {Link} from 'react-router';
  
  const CourseListRow = ({course}) =&gt; {
      return (
          &lt;tr&gt;
              &lt;td&gt;&lt;Link to={'/course/' + course.CourseId}&gt;{course.CourseId}&lt;/Link&gt;&lt;/td&gt;
              &lt;td&gt;{course.Title}&lt;/td&gt;
              &lt;td&gt;{course.Author.FirstName + ' ' + course.Author.LastName}&lt;/td&gt;
          &lt;/tr&gt;
      );
  };
  
  CourseListRow.propTypes = {
      course: PropTypes.object.isRequired
  };
  
  export default CourseListRow;
  </code></pre>
  
  <p><strong>My routes</strong></p>
  
  <pre><code>import React from 'react';
  import { Route, IndexRoute } from 'react-router';
  import App from './components/App';
  import CoursesPage from './components/course/CoursesPage';
  import ManageCoursePage from './components/course/ManageCoursePage';
  
  export default (
      &lt;Route path="/" components={App}&gt;
          &lt;IndexRoute component={HomePage} /&gt;
          &lt;Route path="courses" component={CoursesPage} /&gt;
          &lt;Route path="course" component={ManageCoursePage} /&gt;
          &lt;Route path="course/:id" component={ManageCoursePage} /&gt;
      &lt;/Route&gt;
  );
  </code></pre>
  
  <p>All of the above components work fine. However, when I click on the Link for a course in the CourseListRow component to route to the component below, the state for the course object is always empty. I put a debugger statement in the componentDidMount event and it never hits it, so this components CourseForm child component (not shown) never gets the course:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import CourseForm from './CourseForm';
  import {authorSelectData} from '../../selectors/selectors';
  import CourseApi from '../../api/courseApi';
  import AuthorApi from '../../api/authorApi';
  
  export class ManageCoursePage extends React.Component {
      constructor(props, context) {
          super(props, context);
          this.state = {
              course: {},
              authors: [],
          };
      }
  
      componentDidMount() {
          let id = this.props.params.id;
          if (id) {
              CourseApi.getCourse(id).then(courseData =&gt; {
                  this.setState({ course: courseData });
              }).catch(error =&gt; {
                  throw(error);
              });
          }
  
          AuthorApi.getAllAuthors().then(authorsData =&gt; {
              this.setState({
                  authors: authorSelectData(authorsData)
              });
          }).catch(error =&gt; {
              throw(error);
          });
      }
  
      render() {
          return (
              &lt;CourseForm 
                  course={this.state.course}
                  allAuthors={this.state.authors}
              /&gt;
          );
      }
  }
  
  
  ManageCoursePage.contextTypes = {
      router: PropTypes.object
  };
  
  export default ManageCoursePage;
  </code></pre>
  
  <p>For the life of me, I cannot figure why componentDidMount is not firing and populating the course state object. Any help is appreciated</p>
  
  <p><strong>Follow up:</strong></p>
  
  <p>I changed my render method of my parent (ManageCoursePage) component to the following, commenting out the CourseForm child compnonent:</p>
  
  <pre><code>render() {
      return (
          &lt;h2&gt;Hi {this.state.course.CourseId}&lt;/h2&gt;
          /*&lt;CourseForm 
              course={this.state.course}
              authors={this.state.authors}
              onChange={this.updateCourseState}
              onSave={this.saveCourse}
              onDelete={this.deleteCourse}
              onCancel={this.cancelChange}
              errors={this.state.errors}
              saving={this.state.saving}
              deleting={this.state.deleting}
          /&gt;*/
      );
  }
  </code></pre>
  
  <p>This worked, I got "Hi 11". It appears for whatever reason my child component is not receiving the props from my parent. Could this be something to do with react router, that I am missing something? This has me really perplexed</p>