即使在 ReactJS 中導出組件后，默認導出錯誤

Question

我正在嘗試通過參考他們的文檔來使用 react-bootstrap 創建一個導航欄。

我創建了一個我將導入的 NavigationBar.js 組件文件。

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import PropTypes from 'prop-types';

const NavigationBar = props => {
  const { link, brand } = props;
  return (
    <Navbar bg="light" sticky="top">
      <Navbar.brand href={link}>{brand}</Navbar.brand>
    </Navbar>
  );
};

NavigationBar.propTypes = {
  brand: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
};

export default NavigationBar;

還有我的 App.js（我在其中導入組件）：

import React from 'react';
import './App.css';

import NavigationBar from './components/NavigationBar';

function App() {
  return (
    <div>
      <NavigationBar brand="xyz" link="#home" />
    </div>
  );
}

export default App;

代碼編譯正常，但在瀏覽器中拋出錯誤，如下所示：

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.

Check the render method of `NavigationBar`.

可以做些什么來解決這個錯誤？

Answer 1

我相信錯誤來自這條線

      <Navbar.brand href={link}>{brand}</Navbar.brand>

react中的組件名稱必須以大寫字母開頭。 這意味着 Navbar.brand 應該是 Navbar.Brand