React Bootstrap导航栏：元素类型无效：需要字符串或类/函数答案

【问题标题】：React Bootstrap Navigation bar: Element type is invalid: expected a string or a class/functionReact Bootstrap导航栏：元素类型无效：需要字符串或类/函数
【发布时间】：2020-04-29 00:52:51
【问题描述】：

显示这个错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。你可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。检查渲染 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>
    )
  }
}

【问题讨论】：

我不确定NavLink 是否正确，或者是否应该是Nav.Link，文档对此有点不清楚（好吧，NavLink 在代码中，但缺少来自文档）。除此之外，我没有看到 componentClass 在任何地方列为有效道具。我认为您希望 as 道具指定您真的想要 Link。

标签： reactjs react-router jsx react-bootstrap

【解决方案1】：

Navbar.Header was removed from react-bootstrap in v1.0.0。要解决您的问题，请降级您的 react-bootstrap 版本（例如使用npm install react-bootstrap@0.32.0）或更改您的代码以不使用Navbar.Header。

【讨论】：