"Link To" 不适用于 React 0.14.5 和 React Router 2.0.0.rc4
"Link To" not working with React 0.14.5 and React Router 2.0.0.rc4
我的代码工作正常,直到我尝试将 "Link To" 个组件添加到我的导航中,而不是 hard-coded 个锚元素。
我的控制台returns出现以下错误:
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.
这是我的 header 导航代码:
"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 两次。
Link
组件不是 Router
的一部分。
改变
var Link = Router.Link;
到
var Link = ReactRouter.Link;
我的代码工作正常,直到我尝试将 "Link To" 个组件添加到我的导航中,而不是 hard-coded 个锚元素。
我的控制台returns出现以下错误:
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.
这是我的 header 导航代码:
"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 两次。
Link
组件不是 Router
的一部分。
改变
var Link = Router.Link;
到
var Link = ReactRouter.Link;