使用 react-bootstrap 時組件未定義

Question

我有這樣的 react-bootstrap 代碼。

import React from 'react'
import { Link } from 'react-router-dom'
import { Navbar, NavbarBrand, NavItem, Nav } from 'react-bootstrap'
import './App.css'
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle'
import Routes from './Routes'
import NavbarCollapse from 'react-bootstrap/esm/NavbarCollapse'
import { LinkContainer } from 'react-router-bootstrap'

function App() {
  return (
    <div className="App container">
      <Navbar fluid collapseOnSelect>
        <Navbar.Header>
          <NavbarBrand>
            <Link to="/">Scratch</Link>
          </NavbarBrand>
          <NavbarToggle />
        </Navbar.Header>
        <NavbarCollapse>
          <Nav pullRight>
            <LinkContainer to="/signup">
              <NavItem>Signup</NavItem>
            </LinkContainer>
            <LinkContainer to="/login">
              <NavItem>Sign</NavItem>
            </LinkContainer>
          </Nav>
        </NavbarCollapse>
      </Navbar>
      <Routes />
    </div>
  )
}

export default App

它發生錯誤。 錯誤消息是

錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：未定義。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。

注意：當我省略Navbar.Header它工作正常。

Answer 1

NavBar.Header在React-bootstrap 的v1 版本中被移除。 基本上，如果你添加這個組件，它主要是向 DOM 添加一個帶有navbar-header類的div 。

<div class="navbar-header"></div>

如果您很想知道或想復制它的行為，可以看看這個答案： Bootstrap 中的“navbar-header”類做了什么？ 或查看一些過時的 Bootstrap 樣式表（v4 之前）。

如果你有空閑更新你的布局，看看這里 React-bootstrap Nav 的更新示例： https : //react-bootstrap.github.io/components/navbar/#navbars