为什么我不能将组件导入到我的应用程序中？

Question

我正在尝试将组件导入我的app.js，但始终收到此错误：

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是组件代码：

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;

这是我的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;

如您所见，我试图以与导入所有其他组件相同的方式导入它，所以我不确定自己做错了什么。为什么我的导航栏组件不能导入到我的app.js中？

Answer 1

我发现了一些问题，并解决了这个问题，下面是有效的codesandbox

1：Link导入错误（主要）

在NavBar组件中

import React, { Link } from 'react';

您错误地从Link导入了react。你可能想要这个，

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

2：在Link之外使用Router

在App组件中

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>
    );
  }