React JS Navbar Header 元素类型无效

Question

我正在学习本教程：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`.

我注意到，如果我删除 Navbar.Header 部分并仅保留导航栏，它就可以正常工作。

有什么想法吗？

Answer 1

教程说您应该安装版本 0.32.4 - did you do that? The current version doesn't have a Navbar.Header export anymore。

React JS Navbar Header 元素类型无效

React JS Navbar Header Element type is invalid

reactjs

react-router-dom