React JS Navbar标头元素类型无效

Question

我正在学习本教程：https://serverless-stack.com/chapters/create-containers.html和Navbar存在问题。

这是我的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部分并只留下Navbar它正在工作。

有任何想法吗 ？

Answer 1

教程说你应该安装版本0.32.4 - 你做到了吗？当前版本doesn't have a Navbar.Header export anymore。