“链接到”不适用于 React 0.14.5 和 React Router 2.0.0.rc4

Question

在我尝试将“链接到”组件而不是硬编码的锚元素添加到我的导航之前，我的代码运行良好。

我的控制台返回以下错误：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).Uncaught 

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

这是我的标题导航代码：

"use strict";

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

var Header = React.createClass({
render: function() {
return (
  <nav className = "navbar navbar-default">
    <div className = "container fluid">
      <Link to = "/" className = "navbar-brand">
        <img src = "images/pluralsight-logo.png"/>
        </Link>
        <ul className = "nav navbar-nav">
          <li><Link to = "/app">Home</Link></li>
          <li><Link to = "/authors">Authors</Link></li>
          <li><Link to = "/about">About</Link></li>
        </ul>
      </div>
    </nav>
  );
 }
});

module.exports = Header;

还有我的路由页面：

"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Home = require('./components/homePage');
var App = require('./components/app');
var About = require('./components/about/aboutPage');
var Authors = require('./components/authors/authorPage');
var IndexRoute = require('react-router').IndexRoute;
var createHashHistory = require('history').createHashHistory;
var history = createHashHistory({
queryKey: false
});

ReactDOM.render((
<Router history = {history}>
<Route path="/" component={App}>
  <IndexRoute component= {Home} />
  <Route path="about" component={About}></Route>
    <Route path="authors" component={Authors}></Route>
</Route>
</Router>
), document.getElementById('app'));

Answer 1

Link 组件不是Router 的一部分。

改变

var Link = Router.Link;

到

var Link = ReactRouter.Link;

Answer 2

你的第一个 li 没有被关闭。您关闭了两次链接。