Блог

Главная - Вопросы по программированию - Недопустимый тип элемента заголовка панели навигации React JS

Недопустимый тип элемента заголовка панели навигации React JS

#reactjs #react-router-dom

#reactjs #react-router-dom

Вопрос:

Я следую этому руководству:https://serverless-stack.com/chapters/create-containers.html и у меня проблема с панелью навигации.

Вот мой код для App.js: 

 import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes";
import "./App.css";

export default class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes />
      </div>
    );
  }
}

Routes.js :

 import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () =>
  <Switch>
    <Route path="/" exact component={Home} />
  </Switch>;

Он успешно скомпилирован, но у меня эта ошибка :

 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.

Check the render method of `App`.

Я заметил, что если я удалю панель навигации.Часть заголовка и оставьте только панель навигации, она работает.

Есть идеи?

Комментарии:

1. Вы получаете ту же ошибку, если импортируете NavBar вот так: import Navbar from 'react-bootstrap/Navbar' ? Или, может быть, вы не экспортируете свой Routes компонент в качестве default экспорта?

2. Если я введу ‘react-bootstrap / Navbar, у меня появится эта ошибка: TypeError: не удается прочитать свойство ‘Header’ из undefined’, и я отредактировал вопрос с помощью Routes.js код

3.Похоже, что нет Navbar.Header компонент.

Ответ №1:

В руководстве говорится, что вы должны установить версию 0.32.4 — вы это сделали? В текущей версии больше нет Navbar.Header экспорта.

Комментарии:

1. Вот где я допустил свою ошибку, я хотел использовать последнюю версию, но не подумал об этом. Спасибо 🙂

2. И, похоже, я делал то же самое. Панель навигации. Заголовок больше не существует в React Bootstrap (‘react-bootstrap’). Спасибо за вашу помощь.