客户端阵营，路由器演示：不变违反

我正在关注的阵营，路由器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类。唯一的区别是我正在加载类 - 客户端而不是服务器端。

下面是代码：

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

来源

2015-10-26 David Farrell

你为什么混合ES6和ES5语法？ –

browser.js无法识别我的'import'调用（“require is undefined”），所以我使用react-router [介绍]中建议的语法（https://github.com/rackt/react-router #umd） –

为什么你使用'const App = React.createClass'而不是'class App extends React.Component'？这是创建课程的首选方法，您应该遵循他们的指示。我也没有看到任何导入调用，所以编辑你的问题与相关信息 –

发现这个问题：我是用反应路由器与1.0.0语法老（v0.13x）版本。您可以在CDNJS上获得新版本，或更改版本选择框以获得较旧版本。

来源

2015-10-26 20:00:31

我在定制/使用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错误。

即使终极版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 <...>

来源

2016-01-08 07:45:50 Dr1Ku

客户端阵营，路由器演示：不变违反

回答

相关问题