Ad

"Link To" Not Working With React 0.14.5 And React Router 2.0.0.rc4

My code was working fine until I tried to add "Link To" components to my navigation, rather than hard-coded anchor elements.

My console returns the following errors:

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.

Here is my code for the header navigation:

"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;

And my routing page:

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

Answer

The Link component is not part of the Router.

Change

var Link = Router.Link;

to

var Link = ReactRouter.Link;
Ad
source: stackoverflow.com
Ad