使用 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 的 removed in release v1。基本上，如果你添加这个组件，它主要是向 DOM 添加一个 div 和 navbar-header 类。

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

如果您想知道或想复制它的行为，可以查看以下答案：What does "navbar-header" class do in Bootstrap? 或查看一些过时的 Bootstrap 样式表（v4 之前）。

如果您有空闲更新布局，请在此处查看 React-bootstrap Nav 的更新示例：https://react-bootstrap.github.io/components/navbar/#navbars