React路由配置组件报no-unused-vars未使用变量警告

在React项目中接入errorScreen组件到React Router路由配置时，src/App.js抛出如下ESLint警告：

WARNING in src\App.js
Line 3:8: 'errorScreen' is defined but never used no-unused-vars
项目内HomeScreen、FormScreen等其余组件均可正常运行，仅errorScreen组件触发上述警告。
相关代码如下：
errorScreen组件实现：

const errorScreen = () => {
    const homeRedirect = () => {
        window.location.assign('/')
    }

    return (
        <div className='successMessage'>
            <h2> Error! </h2>
            <h3>
                Please try again on a computer or laptop.{' '}
                <a href='/' onClick={homeRedirect}>
                    Back to Portfolio
                </a>
            </h3>
        </div>
    )
}

export default errorScreen

App.js路由配置：

import HomeScreen from './screens/HomeScreen'
import FormScreen from './screens/FormScreen'
import errorScreen from './screens/errorScreen'
import { Route } from 'react-router'
import { BrowserRouter as Router, Routes } from 'react-router-dom'

function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<HomeScreen />} />
                <Route path='/error' element={<errorScreen />} />
                <Route path='/form' element={<FormScreen />} />
            </Routes>
        </Router>
    )
}

export default App

触发警告的核心原因是违反了React JSX的基础语法规则：

• JSX中小写开头的标签会被解析为原生HTML内置标签，比如<div>、<span>
• 只有大写字母开头的标签，才会被React识别为用户自定义的组件
  代码中路由配置里写的<errorScreen />首字母为小写，React会将其识别为名为errorScreen的原生DOM标签，不会关联通过import导入的errorScreen变量。ESLint检测到导入的变量没有在任何逻辑中被引用，因此抛出「变量定义但未使用」的警告。其余正常运行的组件均为大写开头命名，符合语法规则所以没有问题。

按照React组件命名规范，将errorScreen组件调整为大写开头命名即可，共修改两处：

1. 调整组件定义的名称为大写开头的ErrorScreen（组件文件名可以保留小写不影响运行，推荐组件文件名和组件名保持一致，改名为ErrorScreen.jsx更规范）
   修改后的组件代码：

const ErrorScreen = () => {
    const homeRedirect = () => {
        window.location.assign('/')
    }

    return (
        <div className='successMessage'>
            <h2> Error! </h2>
            <h3>
                Please try again on a computer or laptop.{' '}
                <a href='/' onClick={homeRedirect}>
                    Back to Portfolio
                </a>
            </h3>
        </div>
    )
}

export default ErrorScreen

2. 调整App.js中的导入名和JSX标签名为大写开头的ErrorScreen
   修改后的App.js代码：

import HomeScreen from './screens/HomeScreen'
import FormScreen from './screens/FormScreen'
import ErrorScreen from './screens/errorScreen'
import { Route } from 'react-router'
import { BrowserRouter as Router, Routes } from 'react-router-dom'

function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<HomeScreen />} />
                <Route path='/error' element={<ErrorScreen />} />
                <Route path='/form' element={<FormScreen />} />
            </Routes>
        </Router>
    )
}

export default App

修改保存后，ESLint警告会自动消失，/error路由也可以正常加载ErrorScreen组件。

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