'type.toUpperCase不是函數'當類不是內聯使用反應

Question

我有一些簡單的路由設置，當所有的代碼都是內聯時它們工作得很好。然而，當我在不同的文件中單獨的一類/組件和使用需要引用它，但以下情況除外得到投擲在瀏覽器：

type.toUpperCase is not a function 

我使用的反應，反應路由器和browserify。代碼如下所示：

app.js上述

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

var Nav = require('./layout/Nav.js'); 
var Test = React.createClass({ 
    contextTypes: { 
     router: React.PropTypes.func.isRequired 
    }, 
    render: function render() { 
     return (
     <div> 
      <h2>Test</h2> 
     </div> 
     ); 
    } 
}); 

var routes = (
     <Route name="App" path="/" handler={Nav}> 
      <Route name="Test" handler={Test} /> 
     </Route> 
); 

Router.run(routes, Router.HashLocation, (Root) => { 
    React.render(<Root/>, document.body); 
}); 

Nav.js

var Nav = React.createClass({ 
    contextTypes: { 
     router: React.PropTypes.func.isRequired 
    }, 
    render: function render() { 
     return (
      <div> 
       <nav> 
        <ul> 
         <li><Link to="Home">Home</Link></li> 
        </ul> 
       </nav> 
       <RouteHandler/> 
      </div> 
     ); 
    } 
}); 

此代碼工作正常時，其所有內嵌在一個文件中。 爲什麼從單獨的文件加載時會失敗，如何修復？

Answer 1

乍一看，它看起來像你需要出口Nav。

var Nav = React.createClass({ 
    // ... 
}); 

module.exports = Nav;