javascript - "Link To"不适用于 React 0.14.5 和 React Router 2.0.0.rc4

标签 javascript hyperlink reactjs components react-router

我的代码工作正常,直到我尝试将“链接到”组件添加到我的导航中,而不是硬编码的 anchor 元素。

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

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'));

最佳答案

Link 组件不是 Router 的一部分。

改变

var Link = Router.Link;

var Link = ReactRouter.Link;

关于javascript - "Link To"不适用于 React 0.14.5 和 React Router 2.0.0.rc4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34567781/

相关文章:

reactjs - React Router 4 嵌套路由不渲染

reactjs - 如何使用 React useRef 避免 TypeScript 错误?

javascript - 滚动事件关闭菜单后,导航下拉菜单切换不显示菜单

javascript - 在JS中实现简单的回调

javascript - 如何同时验证中文(unicode)和英文名称?

javascript - jQuery:如果 $(this) 或另一个元素模糊,则

html - 如何对 <a> 超链接标记中包含的 HTML 标记进行样式设置

javascript - 如何使 $q 和 $http 一起工作?

javascript - 单击时切换多个链接的按钮颜色

javascript - 我想用 javascript 将链接延迟 500