title: React router 3 wont render
body: <p>I am trying to go to a route that shows a sidebar and some content but I get <code>undefined</code> as part of my route and it just goes to a blank page. I am not quite sure why this is happening but any help would be appreciated. I am pretty sure it has to do with there not being a route to get the courseId as a parameter, but I am not sure how to nest that in or how to get it to work.</p>
  
  <p>Here are my routes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import App from './components/App'
  import Course from './routes/Course/components/Course'
  import AnnouncementsSidebar from './routes/Course/routes/Announcements/components/Sidebar'
  import Announcements from './routes/Course/routes/Announcements/components/Announcements'
  import Announcement from './routes/Course/routes/Announcements/routes/Announcement/components/Announcement'
  import AssignmentsSidebar from './routes/Course/routes/Assignments/components/Sidebar'
  import Assignments from './routes/Course/routes/Assignments/components/Assignments'
  import Assignment from './routes/Course/routes/Assignments/routes/Assignment/components/Assignment'
  
  render(
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={App}&gt;
        &lt;Route path="course/:courseId" component={Course}&gt;
          &lt;Route path="announcements" components={{
            sidebar: AnnouncementsSidebar,
            main: Announcements
          }}&gt;
            &lt;Route path=":announcementId" component={Announcement} /&gt;
          &lt;/Route&gt;
          &lt;Route path="assignments" components={{
            sidebar: AssignmentsSidebar,
            main: Assignments
          }}&gt;
            &lt;Route path=":assignmentId" component={Assignment} /&gt;
          &lt;/Route&gt;
        &lt;/Route&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  )</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the course component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*globals SideNavData:true */
  const styles = {}
  
  styles.sidebar = {
    float: 'left',
    width: 200,
    padding: 20,
    borderRight: '1px solid #aaa',
    marginRight: 20
  }
  
  class Course extends Component {
    render() {
      let { sidebar, main, children, params } = this.props
      let course = SideNavData[params.courseId]
  
      let content
      if (sidebar &amp;&amp; main) {
        content = (
          &lt;div&gt;
            &lt;div className="Sidebar" style={styles.sidebar}&gt;
              {sidebar}
            &lt;/div&gt;
            &lt;div className="Main" style={{ padding: 20 }}&gt;
              {main}
            &lt;/div&gt;
          &lt;/div&gt;
        )
      } else if (children) {
        content = children
      } else {
        content = &lt;Dashboard /&gt;
      }
  
      return (
        &lt;div&gt;
          &lt;h2&gt;{course.name}&lt;/h2&gt;
          &lt;Nav course={course} /&gt;
          {content}
        &lt;/div&gt;
      )
    }
  }
  
  module.exports = Course</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is a codesandbox if needed: <a href="https://codesandbox.io/s/pw0xvj6r0m" rel="nofollow noreferrer">https://codesandbox.io/s/pw0xvj6r0m</a></p>