javascript - ReactJS:加载组件时 'type is undefined'

Question

我第一次使用 ReactJS 和 React Router 充实一个网站。由于某种原因，该组件(及其姊妹组件 PageFooter，只是具有不同的 HTML)产生以下错误:

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.

TypeError: type is undefined

以下是相关组件的代码:

// External dependencies.
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Link = Router.Link;

// Define the component
var PageHeader = React.createClass( {

render: function() {
    return (
        <div className="header-wrapper">
            <header className="site-header container" role="banner">
                <div className="row">
                    <div className="col sm12">
                        <Link to="/" className="identity" rel="home">DTG</Link>
                        <nav id="site-navigation" className="site-navigation" role="navigation" aria-labelledby="menu-heading">
                            <h4 id="menu-heading" className="sr-only">Menu</h4>
                            <button className="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                                <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z" fill="#fff" />
                                </svg><span>Menu</span>
                            </button>
                            <ul className="menu">
                                <li><Link to="/" activeClassName="active" rel="home">Home</Link></li>
                                <li><Link to="/about" activeClassName="active">About</Link></li>
                                <li><Link to="/blog" activeClassName="active">Blog</Link></li>
                                <li><Link to="/work" activeClassName="active">Work</Link></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </div>
    );
  }
} );

module.exports = PageHeader;

这段代码在 JSXhint.com 上查看，结果更令人费解。

为了确认，包含该组件的模块肯定正在加载。我有一种感觉，我错过了一些明显的东西，所以我要离开它，把它扔掉!

这些问题实际上与组件有关，还是我在 React Router 中没有做过的事情？

编辑:该组件由父组件Page渲染

// External dependencies.
var React = require('react');

// Internal dependencies.
var PageHeader  = require( './header' );
var PageFooter  = require( './footer' );

// Define our component.
var Page = React.createClass( {

    render: function() {
        return (
            <div>
                <PageHeader/>
                <PageFooter/>
            </div>
        );
    }
} );

module.exports = Page;

Answer 1

react-router 的文档有点过时了...您应该使用以下内容来要求 0.13.x 版本的 Link:

var ReactRouter = require('react-router');
var Link = ReactRouter.Link;

我不建议使用 v1.0.0-rc1，因为它还没有准备好用于生产。无论哪种方式，您都应该在此版本中需要像上面这样的 Link 组件:)