React JS Invariant Violation

Question

I am fairly new to ReactJS so I am still learning the rope, but I am getting an error when trying to incorporate react-router into my application. The lovely error that I am getting is:

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 App .

I have searched around for this error and saw a couple of fixes that I don't believe apply to my situation. The most common error is missing a 'return' method, but I am pretty sure I am not missing one.

Here is the code in my index.js:

import './styles/main.css'

import Contact from './components/Contact.jsx';
import App from './components/App.jsx';

import React from 'react';
import ReactDOM from 'react-dom';


import { Router, Route, hashHistory } from 'react-router'

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
), document.getElementById('app'))

And my App.jsx looks like:

import React from 'react';

import Link from 'react-router'

export default class App extends React.Component {
    render() {
        return(
          <div className="wrapper">
            <header>
              <h1>Rest Test Contact List</h1>
              <nav>
                <ul className="navigation">
                  <li><Link to="/contact">Contact</Link></li>
                  <li><Link to="/about">About</Link></li>
                </ul>
              </nav>
            </header>
            {this.props.children}
          </div>
      )
    }
}

And help on this error would be much appreciated. I have been scratching my head on this for a few days.

Thanks!

Answer 1

In App.jsx you're not destructuring your import of Link correctly. It should be

import { Link } from 'react-router';

That would cause the use of Link as a component (in your App's render method) to be undefined.

The Destructuring Assignment syntax makes it possible to extract data from objects and save them as such at the same time. ES6 introduced this shorthand for ease of use. In ES5 this would look like:

var Link = require('react-router').Link

But remember, this only works for when you're accessing children of an object (the submodule in the case of the imported modules you're using). That is why you do not need it when importing React or ReactDOM; you're importing the entire thing. But that doesn't mean likewise can't be done for those other libraries. For React, you could import Component directly, and reference it by name

import React, { Component } from 'react';

And then you'd use it like:

export default class App extends Component { ... }
                                 ^

Notice that you're not using React.Component ? Its because we've already imported it using the same destructuring syntax as with Link from react-router .