Question

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

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

警告：只能将函数或字符串作为React组件安装。

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组件，如上所述：）

Answer 2

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

var Link = Router.Link;

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

var Link = ReactRouter.Link;

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

2 个答案: