2015-05-20 177 views
2

我正嘗試將應用程序移動到React-Router並一直出錯。 然後,我嘗試了一個簡單的例子,它受到了github回購的啓發,並得到了相同的錯誤。可能是一個愚蠢的錯誤,但我不斷重讀代碼,但無法找到它的錯誤。在React-Router中使用的類型/大小寫錯誤

錯誤:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). 
Warning: Only functions or strings can be mounted as React components. 
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined 

代碼:

var React = require('react'); 
var Router = require('react-router'); 
var DefaultRoute = Router.DefaultRoute; 
var Link = Router.Link; 
var Route = Router.Route; 
var RouteHandler = Route.RouteHandler; 

var Inbox = React.createClass({ 
    render: function() { 
     return (
      <div>Inbox</div> 
     ) 
    } 
}); 

var Calendar = React.createClass({ 
    render: function() { 
     return (
      <div>Calendar</div> 
     ) 
    } 
}); 

var Dashboard = React.createClass({ 
    render: function() { 
     return (
      <div>Dashboard</div> 
     ) 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <header> 
      <ul> 
      <li><Link to="app">Dashboard</Link></li> 
      <li><Link to="inbox">Inbox</Link></li> 
      <li><Link to="calendar">Calendar</Link></li> 
      </ul> 
      Logged in as Jane 
     </header> 

     {/* this is the important part */} 
     <RouteHandler/> 
     </div> 
    ); 
    } 
}); 

var routes = (
    <Route name="app" path="/" handler={App}> 
    <Route name="inbox" handler={Inbox}/> 
    <Route name="calendar" handler={Calendar}/> 
    <DefaultRoute handler={Dashboard}/> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.getElementById('app')); 
}); 

回答

2

你錯過了一個r。這:var RouteHandler = Route.RouteHandler;應該是var RouteHandler = Router.RouteHandler;,因爲RouteHandlerRouter對象上,而不在Route對象上。

+0

非常感謝我的愚蠢...... – xav