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

Posted 2023-02-21

【中文标题】reactjs路由器无法读取未定义的渲染

【英文标题】：reactjs router cannot read render of undefined

【发布时间】：2017-05-15 05:04:00

【问题描述】：

我正在整理我的第一个基于反应的应用程序。我有一个可以工作的应用程序，并且已经在 react 路由器中编织。我正在用 babel 进行编译。

我在 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 个晚上。我只是不明白为什么以前在没有路由器的情况下使用渲染时未定义渲染。

【参考方案1】：

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

【讨论】：

我之前尝试过，我再次尝试确定，但它仍然产生相同的错误。也许我的环境中有什么东西？

【参考方案2】：

变化

import ReactDOM,  render  from 'react-dom'; 

到

import  ReactDOM, render  from 'react-dom';

成功了 - 我也没有在路由器中设置浏览器历史记录，这导致了次要故障。

【参考方案3】：

将import Login from './components/Login'; 更改为import Login from './components/Login';。请记住，使用default 导出某些内容时，您不需要包含。