React导入Navbar组件遇ESLint no-unused-vars错误求助

安全阿岳

2026-8-16

问题场景

刚接触ReactJS仅几天，在将Navbar组件导入App.js时出现如下ESLint错误：

src\App.js Line 2:8: 'navbar' is defined but never used no-unused-vars

已安装ESLint包并更新了npm版本，但仍无法解决。

相关代码

App.js

import React from 'react';
import navbar from"./components/navbar";
import './App.css';

function App() {
  return (
  <div className="App">
    <navbar />
    </div>
  );
}

export default App;

navbar.js

import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";

class navbar extends Component{
  render(){
    return(
     
      <nav className="navbarItems">
        <h1 className="navbar-logo">React<i className="fab fa-react"></i>
        </h1>
        <div className="menu-icon"></div>
        <ul>
          {MenuItems.map((items,index)=>{
             return(
              <li key={index}>
                <a className={MenuItems.cname}href={items.url}>
                {items.title}
                </a></li>
             )
          })}
          
        </ul>
      </nav>
    
    )
  }
}

export default navbar;

解决方案

修正组件类名：在navbar.js中，将组件类名从小写的navbar改为大写开头的Navbar，同步修改导出语句：

// navbar.js 修改后
class Navbar extends Component{
  // 原有代码逻辑不变
}

export default Navbar;

修正导入与组件调用：在App.js中，更新导入语句的组件名称，并使用大写开头的标签调用组件：

// App.js 修改后
import React from 'react';
import Navbar from "./components/navbar"; // 导入名称改为Navbar
import './App.css';

function App() {
  return (
  <div className="App">
    <Navbar /> {/* 组件调用改为大写开头的Navbar */}
    </div>
  );
}

export default App;