Question

我正在整理我的第一个基于反应的应用程序。我有一个工作的应用程序，并已在反应路由器编织。我正在和巴贝尔进行交流。

我在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

我在components / 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'));

我认为我的错误是导出/导入我的组件的方式，因为另一个组件存在错误，当我更改哪个是上面首先导入时，错误属于该组件。

我尝试了各种各样的事情，例如向导入添加{}，向导出添加默认值以及在组件中添加其他导入，例如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

将登录导入行更改为import Login from './components/Login';是否会修复它？

Answer 2

将es更改为es。请注意，在使用int main() { int v[] = {0,1,2}; int a = v[0]; int& b = v[0]; }导出内容时，您不需要包含import {Login} from './components/Login';。

Answer 3

更改

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

到

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

诀窍 - 我还没有在路由器中设置浏览器历史记录，导致次要故障。

reactjs路由器无法读取未定义的渲染

3 个答案: