Блог

Я создаю навигационную панель для проекта, и в приведенном выше сообщении мне предлагается проверить метод визуализации в моем компоненте заголовка. Я перепробовал все, что мог придумать, включая просмотр ответов здесь. В частности, я попытался переместить компонент заголовка между компонентом моего приложения и index.js файл Не уверен, нужен ли мне перерыв или что-то в этом роде, но в любом случае вот мой заголовок:

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

Любая помощь приветствуется, спасибо!

Посмотрите на сообщения об ошибках:

 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)
 

Повторяет «Проверьте свой код в заголовке.jsx:XX» для всех строк, где LinkContainer используется.

Он помечает LinkContainer то, из чего вы пытаетесь импортировать react-router-bootstrap . Вы импортируете его по умолчанию, но это должен быть именованный импорт.

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