Why can't I import my component into my app?

Question

I am trying to import a component into my app.js but keep getting this error:

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, or you might have mixed up default and named imports.

Here is the component code:

import React, { Link } from 'react';
import { Nav, Navbar } from 'react-bootstrap';

function NavBar() {
  return (
    <Navbar bg='dark' variant='dark' className='navBar'>
      <Navbar.Brand style={{ gridColumnStart: '2' }}>C C</Navbar.Brand>
      <Nav style={{ gridColumnStart: '6' }}>
        <Link
          className='link'
          activeClass='active'
          to='home'
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
          href='#home'
        >
          Home
        </Link>
        <Link
          className='link'
          activeClass='active'
          to='post'
          spy={true}
          smooth={true}
          offset={-90}
          duration={500}
          href='#features'
        >
          Post
        </Link>
        <Link
          className='link'
          activeClass='active'
          to='signout'
          spy={true}
          smooth={true}
          offset={-30}
          duration={500}
          href='#features'
        >
          Sign Out
        </Link>
      </Nav>
    </Navbar>
  );
}

export default NavBar;

And here is my app.js:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import NavBar from './components/NavBar';
import Home from './pages/Home';
import Login from './pages/Login';
import Registration from './pages/Registration';
import Post from './pages/Post';

import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className='App'>
        <NavBar />
        <Router>
          <Route exact path='/' render={(props) => <Home {...props} />} />
          <Route path='/login'>
            <Login />
          </Route>
          <Route path='/register'>
            <Registration />
          </Route>
          <Route path='/post'>
            <Post />
          </Route>
        </Router>
      </div>
    );
  }
}

export default App;

As you can see, I've tried to import it the same way I've imported all the other components so I'm not sure what I've done wrong. Why won't my navbar component import into my app.js?

Answer 1

i found a few issues, and solved the problem, Heres the working codesandbox

1: Bad Link import (main)

In NavBar component

import React, { Link } from 'react';

You mistakenly imported Link from react. U probably wanted this,

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

2: Use of Link outside of Router

in App component

class App extends React.Component {
  render() {
    return (
      <div className='App'>
        <NavBar /> // <-- Outside `Router`
        <Router>
          // <NavBar /> component should be here
          <Route exact path='/' render={(props) => <Home {...props} />} />
          <Route path='/login'>
            <Login />
          </Route>
          <Route path='/register'>
            <Registration />
          </Route>
          <Route path='/post'>
            <Post />
          </Route>
        </Router>
      </div>
    );
  }