Question

我跟随React-Router guide 但是在浏览器控制台中出现此错误：

14:14:28.840 Error: Invariant Violation: Element type is invalid: expected
a string (for built-in components) or a class/function (for composite 
components) but got: undefined.1 react.js:18307:15

我不知道什么是错的 - React-Router类是导入的，应该是有效的React Classes。一个区别是我加载了类 - 客户端而不是服务器端。

以下是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.4/ReactRouter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
    var Route = window.ReactRouter.Route;
    var Router = window.ReactRouter.Router;
    var Link  = window.ReactRouter.Link;
    var DefaultRoute = window.ReactRouter.DefaultRoute;
    var RouteHandler = window.ReactRouter.RouteHandler;
    var IndexRoute = window.ReactRouter.IndexRoute;

    const App = React.createClass({
      render() {
        return (
          <div>
            <h1>App</h1>
            <ul>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/inbox">Inbox</Link></li>
            </ul>
            {this.props.children}
          </div>
        )
      }
    })

    const About = React.createClass({
      render() {
        return <h3>About</h3>
      }
    })

    const Inbox = React.createClass({
      render() {
        return (
          <div>
            <h2>Inbox</h2>
            {this.props.children || "Welcome to your Inbox"}
          </div>
        )
      }
    })

    const Message = React.createClass({
      render() {
        return <h3>Message {this.props.params.id}</h3>
      }
    })
    ReactDOM.render((
      <Router>
        <Route path="/" component={App}>
          <Route path="about" component={About} />
          <Route path="inbox" component={Inbox}>
            <Route path="messages/:id" component={Message} />
          </Route>
        </Route>
      </Router>
    ), document.getElementById('content'));
    </script>
  </body>
</html>

Answer 1

发现问题：我使用的是旧版（v0.13x）版本的react-router和1.0.0语法。您可以在CDNJS上获取新版本，也可以更改版本选择框以获取旧版本。

Answer 2

我在定制/使用React Redux Starter Kit时也会发生这种情况。

在我的情况下，我以错误的方式使用ES6 / 2015模块import语法（当我实际需要默认值时导入名为 export的 export）。

声明组件时，例如

export default class SomeComponent extends React.Component {   
  render() {
    return (
      // ...
    );   
  } 
}

SomeComponent.propTypes = {
  // ...
};

使用import { SomeComponent } from '<...>/SomeComponent' 代替 import SomeComponent from [...]会产生同样的错误。

我的IDE警告过我，但我认为这只是一些linting错误。

尽管Redux DevTools在没有undefined时会接收import元素（例如只使用<SomeComponent>），但我会得到同样的错误信息，尽管它是与react-router无关。

以下是DevTools错误以供参考：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of <...>

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 <...>

客户端React-Router演示：不变违规

2 个答案: