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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad