ReactJS：加载组件时“类型未定义”答案

【问题标题】：ReactJS: 'type is undefined' when loading a componentReactJS：加载组件时“类型未定义”
【发布时间】：2015-09-29 15:23:57
【问题描述】：

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

警告：React.createElement：类型不应为 null 或未定义。它应该是一个字符串（对于 DOM 元素）或 ReactClass（对于复合组件）。

警告：只有函数或字符串可以作为 React 组件挂载。

TypeError：类型未定义

这里是相关组件的代码：

// 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;

【问题讨论】：

你能告诉我们组件的渲染位置吗？
@gapvision 刚刚更新了问题以包含父组件！
当您删除 PageHeader 和/或 PageFooter 时它正在工作？只是为了确定....
尝试使用 react-router v0.13.3 运行它。ReactRouter.Router 似乎是未定义的...直接使用 require('/react-router/lib/Router') 就像在他们的 github 页面上的示例中一样也不起作用。根据个人经验，当您的组件之一是 undefined 或 null 时，通常会出现该错误
@yash 我目前正在使用 1.0.X 版本。

标签： javascript reactjs react-router

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

var Link = Router.Link;

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

var Link = ReactRouter.Link;

【讨论】：