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

经过进一步调试，问题似乎出在我使用...

var Link = Router.Link;

...什么时候应该...

var Link = ReactRouter.Link;

Answer 2

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

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

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

ReactJS：加载组件时 'type is undefined'

ReactJS: 'type is undefined' when loading a component

javascript

reactjs

react-router