<Link> tag producing error: React.createElement: type is invalid

Question

Error in React Router's link tag while switching from 0.14 to v15.5. This worked fine in the former version and it throws the following error in the latter.

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

navbar.js

import React, { Component } from 'react';
import Link from 'react-router-dom';

class Navbar extends Component
{
  render()
  {
     return (

         <nav className="nav">                                         
           <Link className="btn btn-primary btn-block" to="/about">
           About Us
           </Link>
         </nav>

     );
  }

  export default Navbar;

index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import HomePage from './components/homepage/homepage';
import AboutPage from './components/aboutpage/aboutpage';

render
(
    <BrowserRouter>
        <Switch>
            <Route path="/about" component={AboutPage} />
            <Route path="/" component={HomePage} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
);

Answer 1

this error generally comes if you have not imported or exported a component successfully in your components.For more more info you can read react documentation of when to use curly braces while import and when not:)

import { Link } from "react-router-dom";

.

<ul>
  <li><Link to="x">x</Link></li>
  <li><Link to="y">y</Link></li>
  <li><Link to="z">z</Link></li>
</ul>