react-router-dom导入Navlink提示未导出的报错该如何解决？

问题根因 #

该报错由命名拼写不匹配导致：react-router-dom 对外导出的路由导航组件命名为 NavLink（第二个字母 L 为大写），你代码中写的 Navlink（第二个字母 l 为小写）和官方导出命名不一致，因此触发导入失败错误，该问题和你安装的 4.2.2 版本没有关联，无需调整依赖版本。

解决步骤 #

• 第一步：修改导入语句
  将 HeaderComponent.js 中的导入行调整为正确命名：

import { NavLink } from 'react-router-dom';

• 第二步：修改业务代码中的组件调用
  所有用到该组件的标签（包含开标签和闭标签）都同步修改为大写L的命名，调整后的代码如下：

<NavItem>
  <NavLink className="nav-link" to="/home">
    <span className="fa fa-home fa-sm"> Home</span>
  </NavLink>
</NavItem>

• 第三步：重新启动项目即可，报错会自动消失。

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