客户端React-Router演示:不变量冲突

Client side React-Router demo: invariant violation

本文关键字：不变量 冲突 演示 React-Router 客户端      更新时间：2023-09-26

我遵循React-Router指南但是在浏览器控制台中出现这个错误:

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>

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

我在定制/使用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警告我，但我认为这只是一些检查错误。

即使Redux DevTools会在根本没有import的情况下拾取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 <...>

相关文章：