构建导航栏，我收到此错误 Element type is invalid: expected a string (for built-in components) or a class/function for complex components

Question

I'm building a navbar for a project and the above message is telling me to check the render method in my header component. I've tried everything I can think of, including looking through answers on here. Specifically, I tried moving the Header component between my App component and the index.js file Not sure if I need a break or something but in any case, here's my header:

import React from "react";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import LinkContainer from "react-router-bootstrap";

const header = () => {
  return (
    <Navbar collapseOnSelect expand="lg">
      <LinkContainer to="/App">
      <Navbar.Brand href="/App">
        <img
          src="/PPLogoEdit.jpg"
          width="110"
          height="50"
          className="d-inline-block align-top"
          alt="pikelogo"
        />
      </Navbar.Brand>
      </LinkContainer>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
         <LinkContainer to="/App">
          <Nav.Link style={{ color: "yellow" }} href="/App">
            Home
          </Nav.Link>
          </LinkContainer>
          <LinkContainer to="/About">
          <Nav.Link style={{ color: "orange" }} href="/About">
            About
          </Nav.Link>
          </LinkContainer>
          <LinkContainer to="/Gallery">
          <Nav.Link style={{ color: "green" }} href="/Gallery">
            Gallery
          </Nav.Link>
          </LinkContainer>
          <LinkContainer to="/Shop">
          <Nav.Link style={{ color: "blue" }} href="/Shop">
            Shop
          </Nav.Link>
          </LinkContainer>
          <LinkContainer to="Contact">
          <Nav.Link style={{ color: "purple" }} href="/Contact">
            Contact
          </Nav.Link>
        </LinkContainer>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default header

and the index.js file:

import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Header from './components/Header';
import App from "./components/App";
import About from "./components/About";
import Gallery from "./components/Gallery";
import Shop from "./components/Shop";
import Contact from "./components/Contact";

ReactDOM.render(<React.StrictMode>
  <Router>

 <Switch>
   <Route exact path="/" component={App} />
   <Route path="/about" component={About} />
   <Route path="/gallery" component={Gallery} />
   <Route path="/shop" component={Shop} />
   <Route path="/contact" component={Contact} />   
 </Switch>
</Router>
</React.StrictMode>, document.getElementById("root"));

Any help is appreciated, thank you!

Answer 1

Look at the error messages:

 Warning: React.createElement: 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. Check your code at Header.jsx:24. in Header (at src/index.js:15) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:14) in StrictMode (at src/index.js:13)

Repeats "Check your code at Header.jsx:XX" for all lines where LinkContainer is used.

It's flagging the LinkContainer you try to import from react-router-bootstrap . You default import it but it should be a named import.

import { LinkContainer } from "react-router-bootstrap";