'type.toUpperCase is not a function' 当 类 未使用 React 内联时

Question

我有一些简单的路由设置，当所有代码都是内联时它们工作得很好。但是，当我在另一个文件中分隔 class/component 并使用 require 引用它时，浏览器中会抛出以下异常：

type.toUpperCase is not a function

我正在使用 react、react-router 和 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;