Alex Alex - 3 months ago 15
React JSX Question

React warning error stops compiling the app

I have the following:


  • nav.jsx component: (everything was working fine till this point)

    import React from 'react';
    import Link from 'react-router';

    class Nav extends React.Component {
    render () {
    return (
    <ul>
    <li><Link to='/test1'>test1</Link></li>
    <li><Link to='/test2'>test2</Link></li>
    </ul>
    );
    }
    }

    export default Nav;



a routes component as follow:


  • routes.js

    import React from 'react';
    import { Route, Router, IndexRoute } from 'react-router';
    import ReactDOM from 'react-dom';

    import App from './index.jsx';
    import Test1 from './test1.jsx';
    import Test2 from './test2.jsx';

    ReactDOM.render((
    <Router>
    <Route path="/" component={App} />
    <Route path="/test1" component={Test1} />
    <Route path="/test2" component={Test2} />
    </Router>
    ), document.getElementById('app'));



and an index.jsx like this:

import React from 'react';
import {render} from 'react-dom';

import Nav from './nav.jsx';

class App extends React.Component {
render () {
return (
<div>
<Nav />
<p> Hello React!</p>
</div>
);
}
}

export default App;


however I get the following error in the console:

invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of
Nav
.


Everything was working fine untill I have added the "Nav" component...

enter image description here

Answer
import {Link} from 'react-router'

Above should do your job. Can you give it a try once?