Реагировать Bootstrap Панель навигации: недопустимый тип элемента: ожидается строка или класс / функция - PullRequest
Новая
       32

Реагировать Bootstrap Панель навигации: недопустимый тип элемента: ожидается строка или класс / функция

1 голос
/ 11 января 2020

Отображается эта ошибка:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и имена. Проверьте метод рендеринга CustomNavbar.

App.jsx: 

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import home from './components/home';
import about from './components/about';
import menu from './components/menu';
import gallery from './components/gallery';
import franchise from './components/franchise';
import Navbar from './components/CustomNavbar';

function App() {
  return (
    <Router>
      <div>
        <Navbar />
        <Route exact path ="/" component={home} />
        <Route  path ="/about" component={about} />
        <Route  path ="/menu" component={menu} />
        <Route  path ="/gallery" component={gallery} />
        <Route  path ="/franchise" component={franchise} /> 
      </div>
    </Router>
  );
}

export default App;

component.jsx: 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

export default class CustomNavbar extends Component {
  render() {
    return (
      <Navbar default collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <Link to="/">
              <img src="public/assets/i2.png" alt="thumbnail" />
            </Link>
          </Navbar.Brand>
          <Navbar.Toggle/>
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav pullRight>
            <NavItem eventKey={1} componentClass={Link} to="/">
              Home
            </NavItem>
            <NavItem eventKey={2} componentClass={Link} to="/about">
              About
            </NavItem>
            <NavItem eventKey={3} componentClass={Link} to="/menu">
              Menu
            </NavItem>
            <NavItem eventKey={4} componentClass={Link} to="/gallery">
              Gallery
            </NavItem>
            <NavItem eventKey={5} componentClass={Link} to="/franchise">
             Franchise
            </NavItem>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    )
  }
}

1 Ответ

1 голос
/ 12 января 2020

Navbar.Header был удален из реакции- bootstrap в v1.0.0 . Чтобы исправить вашу проблему, либо понизьте вашу версию реакции - bootstrap (например, с npm install react-bootstrap@0.32.0), либо измените код, чтобы не использовать Navbar.Header.

...