使用 react-bootstrap 时组件未定义

Question

I have code for react-bootstrap like this.

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

it occurred errors. The errors message are

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.

Note: when I omitted Navbar.Header it worked correctly.

Answer 1

NavBar.Header was removed in release v1 of React-bootstrap. Basically, if you add this component, it primarily adds to the DOM a div with a class of navbar-header .

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

If you are curious to know or want to replicate its behavior, you can take a look at this answer: What does "navbar-header" class do in Bootstrap? or take a look at some outdated Bootstrap stylesheet (prior to v4).

If you have the leisure of updating your layout, take a look at the updated examples of React-bootstrap Nav here: https://react-bootstrap.github.io/components/navbar/#navbars