构建导航栏时出现此错误 Element type is invalid: expected a string (for built-in components) or a class/function for composite components

Question

我正在为项目构建导航栏，上面的消息告诉我检查 header 组件中的渲染方法。我已经尝试了我能想到的一切，包括在这里查看答案。具体来说，我尝试在我的 App 组件和 index.js 文件之间移动 Header 组件不确定我是否需要休息一下，但无论如何，这是我的 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

和 index.js 文件：

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"));

感谢任何帮助，谢谢！

Answer 1

查看错误信息：

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)

对使用 LinkContainer 的所有行重复“在 Header.jsx:XX 检查您的代码”。

它标记了您尝试从 react-router-bootstrap 导入的 LinkContainer。您默认导入它，但它应该是命名导入。

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

构建导航栏时出现此错误 Element type is invalid: expected a string (for built-in components) or a class/function for composite components

Building navbar and I get this error Element type is invalid: expected a string (for built-in components) or a class/function for composite components

javascript

reactjs

react-router-dom

react-router-bootstrap