src\\App.js 'nav' 已定義但從未使用過 no-unused-vars

Question

無法在 reactjs 中創建導航欄。

應用程序.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>
      
        <Route exact path="/" element={<Home/>} />
        <Route exact path="/about" element={<About/>} />
        <Route exact path="/contact" component={<Contact/>} />
      </Route>
      </Routes>
      </BrowserRouter>
      
    </div>
  );
}

export default App;

導航.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

終端顯示“ Compiled with warnings. src\\App.js Line 7:8: 'nav' is defined but never used no-unused-vars
搜索關鍵字以了解有關每個警告的更多信息。
要忽略，請將 // eslint-disable-next-line 添加到前一行。 ”

Answer 1

<nav/>是一個有效的 HTML 標簽，因此 ESLint 認為您的 JSX 正在引用該 HTML 標簽，而不是保存您導入的組件的變量。

我建議將您的組件重命名為Nav以消除所有歧義。

Answer 2

從文檔中，

如果以下任何一項為真，則認為使用變量 foo：

它被調用 (foo()) 或構造 (new foo())

它被讀取（var bar = foo）

它作為參數傳遞給函數 (doSomething(foo))

它在傳遞給另一個函數的函數內部讀取 (doSomething(function() { foo(); }))

也就是說，您可能會缺少一些解析，因此您的有效 jsx 和 reactjs 語法可以是有效的 eslint 語法：

eslint 插件反應

Answer 3

發生這種情況是因為您的編譯器無法識別正在使用的 JSX 語法。

所以，你必須安裝： npm install eslint-plugin-react --save-dev

然后在你的.eslintrc.json文件中你應該添加react/jsx-uses-react

Answer 4

您可能出錯的三種可能性：-

1. React 會顯示此錯誤，因為每當有人聲明變量但未使用它時。 在您的情況下，您沒有在整個 App.js 文件中使用此導航。

import nav from './nav'

2. 您忘記啟動<nav>

function App() {
  return (
    <div className="App">
      
      <BrowserRouter>
      <nav/>
      
      <Routes>
      <Route>
      
        <Route exact path="/" element={<Home/>} />
        <Route exact path="/about" element={<About/>} />
        <Route exact path="/contact" component={<Contact/>} />
      </Route>
      </Routes>
      </BrowserRouter>
      
    </div>
  );
}

export default App;

3. 或者react中的自定義組件總是以大寫字母開頭，不是這樣的

<nav> <nav/>

但像這樣

<Nav> <Nav/>