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路由器无法读取未定义的渲染

回答

相关问题