React使用React-Bootstrap添加Navbar Offcanvas报Element type is invalid错误

问题原因 #

你遇到的报错是因为使用的React-Bootstrap版本低于2.5.0，Navbar.Offcanvas 是该版本才新增的内置子组件，低版本的Navbar上不存在这个属性，读取结果为undefined，因此触发"期望组件是字符串/类/函数但得到undefined"的报错。

解决方案 #

方案1：升级React-Bootstrap到符合要求的版本 #

执行以下命令升级依赖：

npm install react-bootstrap@latest bootstrap@latest

升级后无需修改现有代码即可正常运行。

方案2：低版本兼容写法 #

如果暂时不想升级版本，可以将<Navbar.Offcanvas>替换为单独导入的<Offcanvas>组件，同时手动关联Toggle和Offcanvas的显示状态：

1. 首先在组件内添加状态控制Offcanvas的显示隐藏：

import { useState } from 'react';

const HomepageNavbar = () => {
  const [showOffcanvas, setShowOffcanvas] = useState(false);
  // 其余原有代码

2. 修改Toggle和Offcanvas的代码：

<Navbar.Toggle 
  className="d-inline d-md-none" 
  aria-controls="offcanvasNavbar"
  onClick={() => setShowOffcanvas(!showOffcanvas)}
/>
<Offcanvas
  id="offcanvasNavbar"
  aria-labelledby="offcanvasNavbarLabel"
  placement="end"
  show={showOffcanvas}
  onHide={() => setShowOffcanvas(false)}
>
  {/* 原有Offcanvas内部代码保持不变 */}
</Offcanvas>

额外排查点 #

如果升级后仍然报错，请检查以下两点：

• 确认所有导入的组件名和使用时的拼写完全一致
• 确认HomepageNavbar组件已经正确使用export default HomepageNavbar导出，引用时没有混合默认导入和命名导入

内容的提问来源于stack exchange，提问作者Mehmet Aziz Algüllü