2017-03-27 120 views
0

我是React的新手。我正在学习React Routing。我创建了一个简单的App。这里是我的代码获取错误学习React Routing时元素类型无效

<html> 
    <head> 
     <title>React Routing</title> 
     <script src="/Ch13-01-DisplayInitialFrame/resources/js/react.js" type="text/javascript"></script> 
     <script src="/Ch13-01-DisplayInitialFrame/resources/js/react-dom.js" type="text/javascript"></script> 

     <script src="/Ch13-01-DisplayInitialFrame/resources/js/babel.js" type="text/javascript"></script> 

     <script src="/Ch13-01-DisplayInitialFrame/resources/js/react-router-4.0.0-2.js" type="text/javascript"></script> 
     <link href="/Ch13-01-DisplayInitialFrame/resources/css/reactRouting.css" rel="stylesheet"><script>; 
    </head> 
    <body> 
     <div id="container"></div> 
     <script src="/Ch13-01-DisplayInitialFrame/resources/js/reactRouting.js" type="text/babel"></script> 
    </body> 
</html> 

这里是我的reactRouting.js

var destination = document.querySelector("#container"); 
var App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <h1>Simple SPA</h1> 
       <ul className="header"> 
        <li>Home</li> 
        <li>Stuff</li> 
        <li>Contact</li> 
       </ul> 
       <div className="content"> 
       </div> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <div> 
     <App/> 
    </div>, 
    destination 
); 

此代码工作正常。但是,当我改变了我的渲染使用ReactRouter我开始越来越错误

ReactDOM.render(
    <ReactRouter.Router> 
     <ReactRouter.Route path="/" component={App} /> 
    </ReactRouter.Router>, 
    destination 
); 

的错误是

You are using the in-browser Babel transformer. Be sure to precompile your  scripts for production - https://babeljs.io/docs/setup/ 
babel.js (60774,4) 
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). 
react.js (20483,9) 
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). 
react.js (20483,9) 
SCRIPT5022: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
react.js (20157,5) 

我做错了吗?我正在使用React v15.3.1。我是否需要更多js来运行此代码?

感谢

回答

0

您正在使用ReactRouter 4具有完全不同的API,那么之前的版本,请使用new documentation
我还建议您在开始使用React时专门使用捆绑软件。 create-react-app是一个很好的样板生成器,例如照顾捆绑器配置,babel等。
最后在Re​​actRouter v4中,您应该使用基于doc的ReactRouter.BrowserRouter组件。
如果您坚持尝试通过脚本标记进行反应,请使用npm页面中提供的脚本链接添加ReactRouter。我强烈建议不要在生产应用程序中使用此配置。

相关问题