title: reactjs router cannot read render of undefined
body: <p>I'm putting together my first react based app. I had a working application and have since woven in the react router. I am transpiling with babel. </p>
  
  <p>I get the following the the developer console in chrome - </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'render' of undefined
  at Object.1../components/Login (http://localhost:8000/bundle.js:90:19)
  at s (http://localhost:8000/bundle.js:1:254)
  at e (http://localhost:8000/bundle.js:1:425)
  at http://localhost:8000/bundle.js:1:443
  </code></pre>
  
  <p>I have the following component at components/Login.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Login extends React.Component {
  render() {
      return (
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sign Up Now&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a className="button button-primary" href="#"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      );
  }
  }
  export default Login
  </code></pre>
  
  <p>Within my app.js I have the following - </p>
  
  <pre><code>'use strict';
  
  import React from 'react';
  import { ReactDOM, render } from 'react-dom';
  import { browserHistory, Router, Route, Link, withRouter } from 'react-router';
  
  import {Login} from './components/Login';
  
  const App = React.createClass({
  
    render() {
      return (
        &lt;div&gt;
  
          &lt;h2&gt;Title&lt;/h2&gt;
          &lt;Options/&gt;
  
        &lt;/div&gt;
      )
    }
  })
  
  
  
  const Logout = React.createClass({
  
    render() {
      return &lt;p&gt;You are now logged out&lt;/p&gt;
    }
  
  })
  
  const Profile = React.createClass({
    render() {
      //const token = auth.getToken()
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Profile&lt;/h1&gt;
          &lt;p&gt;You made it!&lt;/p&gt;
          //&lt;p&gt;{token}&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  })
  
  function requireAuth() {
      console.log("here");
  }
  
  ReactDOM.render((   
      &lt;Router&gt;
          &lt;Route path="/" component={App}&gt;
              &lt;Route path="login" component={Login} /&gt;
              &lt;Route path="logout" component={Logout} /&gt;
              &lt;Route path="profile" component={Profile} onEnter={requireAuth} /&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;
  ), document.getElementById('app'));
  </code></pre>
  
  <p>I believe my error to be in the way in which I am export/ importing my components as the error exists with another component and when I change which is imported first in the above the error falls to that component.</p>
  
  <p>I've tried various things such as adding {} to the import, adding default to the export and adding other imports into the component such as react-dom.</p>
  
  <p>I'm building using the following </p>
  
  <pre><code>babel -presents react,es2015 js/source -d js/build
  browserify js/build/app.js -o bundle.js 
  cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' &gt; bundle.css
  date; echo;
  </code></pre>
  
  <p>Can anyone advise - I've been on this for 3 evenings now. I just don't get why render is undefined when it previously worked when using without the router.</p>