使用 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