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

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

“链接到”不与React 0.14.5和React Router 2.0.0.rc4一起使用

2 个答案: