reactjs路由器無法讀取未定義的渲染

我正在整理我的第一個基於反應的應用程序。我有一個工作的應用程序，並已在反應路由器編織。我正在和巴貝爾一起玩。reactjs路由器無法讀取未定義的渲染

我得到以下Chrome的開發者控制檯 -

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

我在組件以下組件/ Login.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

在我的app.js我有以下幾點 -

'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'));

我相信我的錯誤是我的出口/進口我的組合nents作爲錯誤存在與另一個組件，當我改變哪個是在上面導入第一個錯誤落入該組件。

我已經嘗試了各種方法，例如嚮導入添加{}，嚮導出添加默認值，並將其他導入添加到組件中，如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個晚上了。我只是不明白爲什麼渲染在未使用路由器的情況下先前工作時未定義。

來源

2016-12-30 gadgetlab

更改

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

到

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

奏效了 - 我還沒有在這造成二次故障的路由器設置browserhistory。

來源

2016-12-31 13:39:40 gadgetlab

是否將登錄導入行更改爲import Login from './components/Login';修復了它？

來源

2016-12-30 23:32:13

我以前試過，我試過再次確定，但它仍然產生相同的錯誤。也許在我的環境中？ – gadgetlab

將import {Login} from './components/Login';更改爲import Login from './components/Login';。請記住，使用default導出某些內容時，您不需要包含{}。

來源

2016-12-31 03:59:01

reactjs路由器無法讀取未定義的渲染

回答

相關問題