Component is undefined when use react-bootstrap - reactjs

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