React JS 不变违规

Question

我是 ReactJS 的新手，所以我仍在学习中，但在尝试将 react-router 合并到我的应用程序时出现错误。我得到的可爱错误是：

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App.

我四处搜索此错误，发现了一些我认为不适用于我的情况的修复程序。最常见的错误是缺少 'return' 方法，但我很确定我没有漏掉一个方法。

这是我的代码 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'))

我的 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>
      )
    }
}

非常感谢解决此错误的帮助。这几天一直在摸不着头脑。

谢谢！

Answer 1

在 App.jsx 中，您没有正确解构 Link 的导入。应该是

import { Link } from 'react-router';

这会导致使用 Link 作为组件（在您的应用程序的渲染方法中）未定义。

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

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

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

import React, { Component } from 'react';

然后你会像这样使用它：

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

请注意您没有使用 React.Component？这是因为我们已经使用与 react-router 中的 Link 相同的解构语法导入它。

React JS 不变违规

React JS Invariant Violation

javascript

reactjs

react-router