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

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 类。一个区别是我正在加载类-客户端而不是服务器端。

代码如下：

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

发现问题：我使用的是具有 1.0.0 语法的旧 (v0.13x) 版本的 react-router。您可以在 CDNJS 上获取新版本或更改版本 select 框以获取旧版本。

Answer 2

我在 customizing/using React Redux Starter Kit 时也遇到过这种情况。

在我的例子中，我以错误的方式使用了 ES6/2015 模块 import 语法（当我导入 named export实际上需要 default export）。

声明组件时，例如

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

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

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

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

即使 Redux DevTools 会在根本没有 importing 时获取 undefined 元素（例如，仅使用 <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 演示：不变违规

Client side React-Router demo: invariant violation

javascript

reactjs

react-router