React与Bootstrap开发中export default组件抛出无效元素类型错误的排查与解决

问题背景 #

我在学习React和Bootstrap，搭建一个包含导航栏、多页面及登录页的简单应用时遇到了这个报错：

Error: 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 Navigation。

我已经正确创建了Navigation.js组件并通过export default导出，在App.js里也用默认导入引入了该组件，甚至尝试把类组件改成函数式组件，但错误依然存在。

问题根源 #

经过排查，发现问题出在导航组件的代码里：我把React-Bootstrap的Nav.Link组件写成了Nav.link（注意Link的首字母大小写）。

在React中，自定义组件或第三方库的组件名必须以大写字母开头，而且React-Bootstrap提供的导航链接组件的正确名称就是Nav.Link，小写的link并不是一个有效的组件，所以React无法识别它，返回了undefined，最终触发了这个看似和导入导出相关的错误。

修复步骤 #

只需要把Navigation.js中所有的Nav.link替换为Nav.Link即可：

错误代码片段 #

<Nav>
  <Nav.link href='/'>Main</Nav.link>
  <Nav.link href='/about'>About Us</Nav.link>
  <Nav.link href='/contact'>Contact Us</Nav.link>
  <Nav.link href='/login'>Log in</Nav.link>
  <Nav.link href='/home'>Homepage</Nav.link>
</Nav>

修复后代码片段 #

<Nav>
  <Nav.Link href='/'>Main</Nav.Link>
  <Nav.Link href='/about'>About Us</Nav.Link>
  <Nav.Link href='/contact'>Contact Us</Nav.Link>
  <Nav.Link href='/login'>Log in</Nav.Link>
  <Nav.Link href='/home'>Homepage</Nav.Link>
</Nav>

修改完成后，重新运行应用，错误就会消失，导航组件可以正常渲染了。

内容的提问来源于stack exchange，提问作者Chinmay