React新手求助：导入Navbar组件不显示且遇ESLint未使用变量报错

我是React新手，导入自定义Navbar组件后页面完全看不到这个组件，同时收到ESLint报错：'Navbar' is defined but never used. eslint(no-unused-vars)

相关代码 #

App.js

import React from 'react';
import Navbar from './components/Navbar/Navbar';

function App() {
  return (
    <div className="App">
  <h1>working?</h1>
    </div>
  );
}

export default App;

Navbar.js

import React from 'react'
import {BiSearch} from 'react-icons/bi'
import {BsPerson} from 'react-icons/bs'

function Navbar() {
  return (
    <div className='navbar'>
        <div className='logo'>
            <h2>BEACHES. </h2>
        </div>
        <ul className='nav-menu'>
            <li>Home</li>
            <li>Destinations</li>
            <li>Travel</li>
            <li>Book</li>
            <li>Views</li>
        </ul>
      <div className='nav-icons'>
        <BiSearch className='icon'/>
        <BsPerson className='icon'/>
      </div>
    </div>
  )
}

export default Navbar

解决方案 #

1. 修复组件不显示的问题

你已经成功导入了Navbar组件，但没有在App组件的JSX结构中渲染它。只需要在App的return里添加<Navbar />即可：

修改后的App.js：

import React from 'react';
import Navbar from './components/Navbar/Navbar';

function App() {
  return (
    <div className="App">
      <Navbar /> {/* 添加这一行渲染Navbar */}
      <h1>working?</h1>
    </div>
  );
}

export default App;

2. 解决ESLint报错问题

这个报错是因为ESLint默认规则没有识别React组件的使用逻辑，需要安装并配置react插件：

• 执行命令安装依赖：npm install --save-dev eslint-plugin-react
• 打开项目根目录的.eslintrc.json文件，在extends数组中加入plugin:react/recommended：

{
  "extends": [
    "plugin:react/recommended"
    // 保留你原本已有的其他配置项
  ]
}

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