React项目ESLint提示'home'已定义未使用问题求助

问题描述 #

开发React路由功能时遇到ESLint报错：

Line 3:9: 'home' is defined but never used no-unused-vars

错误截图：

相关代码：

import './App.css';
import {BrowserRouter,Routes,Route,} from 'react-router-dom'
import {home} from './page/home'
function App() {
  return <div><h1>hello</h1>
    <BrowserRouter>
          <Routes>
            <Route path='/' element={<home/>}/>
          </Routes>
    </BrowserRouter>
  </div>
 
}

export default App;

明明在Route组件里使用了<home/>，却还是触发了未使用变量的错误，求解决方法。

问题原因及解决方案 #

问题根源 #

React的JSX语法有强制规范：组件名称必须以大写字母开头。你导入的home是小写开头，在JSX中<home/>会被解析成普通HTML标签，而非你导入的React组件，因此ESLint判定这个导入的变量未被使用。

具体解决步骤 #

1. 修改导入与导出的组件名称
   先把导入语句里的组件名改成大写开头：

   import { Home } from './page/home'
   

   同时要保证./page/home文件中导出的组件也是大写开头（比如：export const Home = () => { /* 组件内容 */ }）。

2. 在JSX中使用大写组件名
   把Route的element属性里的组件引用改成大写：

   <Route path='/' element={<Home/>}/>
   

完成以上修改后，ESLint就能识别到你已经正确使用了导入的组件，no-unused-vars错误会自动消失。

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