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

Question

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

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

组件代码如下：

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';

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

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

2：在 `Router`

之外使用 Link

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

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

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

reactjs

react-component

1：错误 `Link` 导入（主要）

2：在 `Router`

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

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

reactjs

react-component

1：错误 Link 导入（主要）

2：在 Router

1：错误 `Link` 导入（主要）

2：在 `Router`