ReactJS页面渲染空白 报navBar未使用no-unused-vars错误排查

报错信息 #

Line 2:10:  'navBar' is defined but never used  no-unused-vars

问题代码 #

App.js #

import React from 'react'
import { navBar } from './components/navBar'

const App = () => {
  return (
      <navBar/>
  )
}

export default App

navBar.js #

import React from 'react';
import {  Link } from "react-router-dom";
const navBar= () =>{
  return (
  <div>
    <li>
      <Link to="/">Dogs</Link>
    </li>
    <li>
      <Link to="/cats">Cats</Link>
    </li>
    <li>
      <Link to="/sheeps">Sheeps</Link>
    </li>
    <li>
      <Link to="/goats">Goats</Link>
    </li>
  </div>
  );
}
export default navBar

错误根因 #

• 导入语法不匹配：navBar.js使用export default做默认导出，App.js却用了命名导入的花括号写法，实际导入的navBar变量值为undefined，没有正确拿到组件。
• 违反React组件命名规则：JSX语法规定，小写开头的标签会被识别为原生HTML标签，只有大写开头的标签才会被识别为自定义React组件。代码里写的<navBar/>是小写开头，React会尝试渲染名为navBar的原生DOM元素（这个元素根本不存在），完全没有用到前面导入的组件变量，因此触发ESLint的「变量定义未使用」报错，同时页面因为没有渲染有效内容显示空白。

修复方法 #

• 修正导入语句：默认导出的组件导入时不需要加花括号
• 统一组件名为大写开头，符合React规范，同步修改组件定义、导出、导入、JSX标签四处的命名

修复后App.js #

import React from 'react'
import NavBar from './components/navBar'

const App = () => {
  return (
      <NavBar/>
  )
}

export default App

修复后navBar.js #

import React from 'react';
import { Link } from "react-router-dom";
const NavBar = () =>{
  return (
  <ul>
    <li>
      <Link to="/">Dogs</Link>
    </li>
    <li>
      <Link to="/cats">Cats</Link>
    </li>
    <li>
      <Link to="/sheeps">Sheeps</Link>
    </li>
    <li>
      <Link to="/goats">Goats</Link>
    </li>
  </ul>
  );
}
export default NavBar

额外优化：给列表项外层补充了<ul>标签，符合HTML语义规范

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