title: Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function
body: <p>I am new to React JS, to learn it I am trying to create a news app with the help of newsapi.org. I am listing all the news sources on the landing page and on clicking on one of the news sources, I want to redirect to a link specific to that source and display all the news from that source. </p>
  
  <p>I am using react-router for routing. I am trying to create a link for each News Source, but when I am using the Link component, I am getting following error</p>
  
  <p><strong>Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of <code>NewsItem</code>.</strong></p>
  
  <p><strong>warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of <code>NewsItem</code>.</strong></p>
  
  <p>File App.js </p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import './Routes.js';
  import { Link } from 'react-router';
  import NewsList  from './NewsList';
  import Header from './Header';
  
  class App extends Component {
  
      constructor(props) {
         super(props);
         this.state = { sources: [] };
      }
  
      componentDidMount() {
          fetch('https://newsapi.org/v1/sources?language=en&amp;apiKey=c0f3800ecd5e42f5b1f5bc0e2902bddb')
              .then(result=&gt; result.json())
              .then(json =&gt;  {
                  this.setState({sources: json.sources});
                  //console.log(this.state.sources); return false;
              });
      }
  
      render() {
  
          const sources = this.state.sources;
          // console.log(sources)
          return (
  
              &lt;div&gt;
                  &lt;Header /&gt;
  
                      &lt;NewsList sources={sources} /&gt;
  
              &lt;/div&gt;
          )
  
      }
  
  }
  
  export default App;
  </code></pre>
  
  <p>Header.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Header extends Component {
  
      render () {
  
          return (
  
              &lt;nav className="navbar navbar-inverse navbar-fixed-top"&gt;
                  &lt;div className="container"&gt;
                      &lt;div className="navbar-header"&gt;
                          &lt;button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                              &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span className="icon-bar"&gt;&lt;/span&gt;
                              &lt;span className="icon-bar"&gt;&lt;/span&gt;
                              &lt;span className="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;a className="navbar-brand" href="javascript:void(0)"&gt;NEWS SUMO&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
  
  
          )
  
      }
  
  
  }
  </code></pre>
  
  <p>NewsList.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import NewsItem from './NewsItem';
  
  export default class NewsList extends Component {
  
      render() {
          //console.log(this.props.sources)
          const {sources} = this.props;
          // console.log(this.sources);
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row source-list"&gt;
                      { sources.map((source, key) =&gt; (
  
                          &lt;NewsItem key={key} source={source}  /&gt;
  
                      ))}
                  &lt;/div&gt;
              &lt;/div&gt;
          )
  
      }
  }
  </code></pre>
  
  <p>NewsItem.js </p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router';
  
  export default class NewsItem extends Component {
  
      render() {
          return (
              &lt;div className="col-md-3"&gt;
                  &lt;Link to={`/news/source/${this.props.source.id}`}&gt;
                      { this.props.source.name }
                  &lt;/Link&gt;;
              &lt;/div&gt;
          );
  
      }
  
  }
  </code></pre>
  
  <p>Routes.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import NewsItem from './NewsItem';
  
  export default class NewsList extends Component {
  
      render() {
          //console.log(this.props.sources)
          const {sources} = this.props;
          // console.log(this.sources);
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row source-list"&gt;
                      { sources.map((source, key) =&gt; (
  
                          &lt;NewsItem key={key} source={source}  /&gt;
  
                      ))}
                  &lt;/div&gt;
              &lt;/div&gt;
          )
  
      }
  }
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Using react-router-dom instead of react-router fixed the issue.</p>