React创建navbar时出现nav已定义但未使用eslint警告问题

核心问题：违反React自定义组件命名规范 #

React明确要求自定义组件必须以大写字母开头，小写开头的标签会被自动识别为原生HTML标签。你当前导入的自定义nav组件是小写命名，App.js中写的<nav/>实际渲染的是空的原生nav标签，你导入的自定义组件完全未被使用，这就是no-unused-vars警告的直接来源。

其他需修正的适配问题 #

• 多余嵌套空Route标签：React Router v6不需要在子路由外层额外套一层无属性的Route
• 路由属性错误：React Router v6已废弃component传参，统一使用element属性传入组件
• 冗余exact属性：React Router v6默认开启精确匹配，不需要额外添加exact字段

修正后代码 #

nav.js #

import React from 'react'
import {Link} from 'react-router-dom'

// 组件名改为大写开头
function Nav(){
    return <div>
      <nav>
          <Link to="/" >Home</Link>
          <Link to="/about" >About</Link>
          <Link to="/contact" >Contact</Link>
      </nav>
    </div>
}

export default Nav

App.js #

import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Home from './Routes/Home'
import About from './Routes/About'
import Contact from './Routes/Contact'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
// 用大写变量名接收导入的组件
import Nav from './nav'


function App() {
  return (
    <div className="App">
      <BrowserRouter>
      {/* 渲染大写开头的自定义导航组件 */}
      <Nav/>
      
      <Routes>
        {/* 去掉多余外层Route，删除exact属性，统一用element传组件 */}
        <Route path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
        <Route path="/contact" element={<Contact/>} />
      </Routes>
      </BrowserRouter>
      
    </div>
  );
}

export default App;

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