Javascript 反应JS不变违反

我对ReactJS相当陌生，所以我还在学习rope，但在尝试将ReactRouter合并到我的应用程序中时，我遇到了一个错误。我得到的一个可爱的错误是：

未捕获不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查

App

的渲染方法

我到处寻找这个错误，发现了一些我认为不适用于我的情况的修复方法。最常见的错误是缺少一个“return”方法，但我非常确定我没有缺少一个

以下是my index.js中的代码：

import './styles/main.css'

import Contact from './components/Contact.jsx';
import App from './components/App.jsx';

import React from 'react';
import ReactDOM from 'react-dom';


import { Router, Route, hashHistory } from 'react-router'

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
), document.getElementById('app'))

import./styles/main.css'
从“./components/Contact.jsx”导入联系人；
从“./components/App.jsx”导入应用程序；
从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，hashHistory}
ReactDOM.render((
)，document.getElementById（'app'））

我的App.jsx看起来像：

import React from 'react';

import Link from 'react-router'

export default class App extends React.Component {
    render() {
        return(
          <div className="wrapper">
            <header>
              <h1>Rest Test Contact List</h1>
              <nav>
                <ul className="navigation">
                  <li><Link to="/contact">Contact</Link></li>
                  <li><Link to="/about">About</Link></li>
                </ul>
              </nav>
            </header>
            {this.props.children}
          </div>
      )
    }
}

从“React”导入React；
从“反应路由器”导入链接
导出默认类App扩展React.Component{
render（）{
返回(
Rest测试联系人列表

接触
关于

{this.props.children}
)
}
}

如果您能帮助解决这个问题，我们将不胜感激。这几天我一直在挠头

---

谢谢

在

App.jsx

中，您没有正确地解构导入的

链接。应该是

import { Link } from 'react-router';

这将导致
链接
作为组件（在应用程序的渲染方法中）的使用未定义

该语法使得从对象中提取数据并同时保存它们成为可能。ES6引入了这种速记法以便于使用。在ES5中，这看起来像：

var Link = require('react-router').Link

但请记住，这仅适用于访问对象的子对象（在使用导入模块的情况下是子模块）时。这就是为什么在导入React或ReactDOM时不需要它的原因；你正在导入整个东西。但这并不意味着其他库也不能这样做。对于React，您可以直接导入
组件
，并按名称引用它

import React, { Component } from 'react';

然后你会像这样使用它：

export default class App extends Component { ... }
                                 ^

请注意，您没有使用
React.Component
？这是因为我们已经使用与
Link
相同的解构语法从
react-router
导入了它
 在
App.jsx
中，您没有正确地解构导入的
链接。应该是

import { Link } from 'react-router';

这将导致
链接
作为组件（在应用程序的渲染方法中）的使用未定义

该语法使得从对象中提取数据并同时保存它们成为可能。ES6引入了这种速记法以便于使用。在ES5中，这看起来像：

var Link = require('react-router').Link

但请记住，这仅适用于访问对象的子对象（在使用导入模块的情况下是子模块）时。这就是为什么在导入React或ReactDOM时不需要它的原因；你正在导入整个东西。但这并不意味着其他库也不能这样做。对于React，您可以直接导入
组件
，并按名称引用它

import React, { Component } from 'react';

然后你会像这样使用它：

export default class App extends Component { ... }
                                 ^

请注意，您没有使用
React.Component
？这是因为我们已经使用与
Link
相同的解构语法从
react-router
导入了它
 我注意到的一件事是，在App.jsx中，您没有正确地分解导入的
链接。它应该是从“反应路由器”导入{Link}
。这可能是未定义将
Link
用作组件（在应用程序的渲染方法中）的原因。我之所以说“可能”，是因为我无法通过所有的设置来测试它。你太棒了！这确实解决了问题。你能给我解释一下为什么我需要大括号来从react路由器导入一件东西，而你不需要为react或ReactDOM这样的其他人这样做吗？当然！我会写一个更详细的解释的答案。我注意到一件事是在App.jsx中，您没有正确地分解导入的
链接。它应该是从“反应路由器”导入{Link}
。这可能是未定义将
Link
用作组件（在应用程序的渲染方法中）的原因。我之所以说“可能”，是因为我无法通过所有的设置来测试它。你太棒了！这确实解决了问题。你能给我解释一下为什么我需要大括号来从react路由器导入一件东西，而你不需要为react或ReactDOM这样的其他人这样做吗？当然！我将写一个更详细的解释作为答案，您可以使用ReactDOM中的
渲染
，因为它是ReactDOM最常用的用法。只需从'react dom'导入{render}
（注意render中小写的r！），然后只
render（，document.getElementById（'app'）。节省一些字节。您可以从ReactDOM中使用
render
，因为这是ReactDOM最常用的用法。只需从'react dom'导入{render}
（注意render中小写的r！），然后只
render（，document.getElementById（'app'）。节省一些字节。