reactjsルータが定義されていないレンダリングを読み取ることができません

Question

私は最初の反応ベースのアプリケーションをまとめています。私は実用的なアプリケーションを持っていたので、反応ルータに織り込まれています。私はバベルと蒸散しています。

私はクロームでデベロッパーコンソール、次の取得 - 私はコンポーネント/ Login.js

私は、次のしている私のapp.js以内

import React, { Component } from 'react'; 

class Login extends React.Component { 
render() { 
    return (
     <nav> 
      <ul> 
       <li><a href="#">Sign Up Now</a></li> 
       <li><a className="button button-primary" href="#">Sign In</a></li> 
      </ul> 
     </nav> 
    ); 
} 
} 
export default Login 

で次のコンポーネントを持って

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 

-

'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 (
     <div> 

     <h2>Title</h2> 
     <Options/> 

     </div> 
    ) 
    } 
}) 



const Logout = React.createClass({ 

    render() { 
    return <p>You are now logged out</p> 
    } 

}) 

const Profile = React.createClass({ 
    render() { 
    //const token = auth.getToken() 

    return (
     <div> 
     <h1>Profile</h1> 
     <p>You made it!</p> 
     //<p>{token}</p> 
     </div> 
    ) 
    } 
}) 

function requireAuth() { 
    console.log("here"); 
} 

ReactDOM.render(( 
    <Router> 
     <Route path="/" component={App}> 
      <Route path="login" component={Login} /> 
      <Route path="logout" component={Logout} /> 
      <Route path="profile" component={Profile} onEnter={requireAuth} /> 
     </Route> 
    </Router> 
), document.getElementById('app')); 

私のエラーは、自分のコンポをエクスポート/インポートする方法であると信じていますエラーが別のコンポーネントに存在するため、上記で最初にインポートされたものを変更すると、そのコンポーネントにエラーが発生します。

私は、インポートに{}を追加し、エクスポートにデフォルトを追加し、react-domなどのコンポーネントに他のインポートを追加するなど、さまざまなことを試しました。

誰が助言することができます私は、次の

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' > bundle.css 
date; echo; 

を使用して構築しています - 私は今、3夜のためにこれにしてきました。私はちょうどルーターなしで使用するとき以前に働いたときにレンダリングが未定義となっている理由を知りません。

Answer 1

はトリックをした - 私はまた、二次障害を引き起こしたルータにbrowserhistoryを設定していませんでした。

Answer 2

ログインのインポート行をimport Login from './components/Login';に変更しても問題は解決しますか？

Answer 3

変更import {Login} from './components/Login';~import Login from './components/Login';。 defaultでエクスポートする場合は、{}を含める必要はありません。

import { ReactDOM, render } from 'react-dom'; 

に

import ReactDOM, { render } from 'react-dom'; 

を変更