src\\App.js 'nav' 已定义但从未使用过 no-unused-vars

Question

Can't create navbar in reactjs.

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

export default App;

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

The terminals shows " Compiled with warnings. src\\App.js Line 7:8: 'nav' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before. "

Answer 1

<nav/> is a valid HTML tag, so ESLint thinks your JSX is referencing that HTML tag, and not the variable that holds the component you imported.

I recommend renaming your component to be Nav to remove all ambiguity.

Answer 2

From the docs,

A variable foo is considered to be used if any of the following are true:

It is called (foo()) or constructed (new foo())

It is read (var bar = foo)

It is passed into a function as an argument (doSomething(foo))

It is read inside of a function that is passed to another function (doSomething(function() { foo(); }))

So that, said, you maybe be missing some parsing so your valid jsx and reactjs syntax can be valid eslint syntax:

eslint-plugin-react

Answer 3

This happenes because your compiler does not recognize JSX syntax as being used.

So, You have to install: npm install eslint-plugin-react --save-dev

Then in your .eslintrc.json file you should add react/jsx-uses-react

Answer 4

Three possibilities where you may have been wrong :-

1. React shows this error because whenever someone declares a variable but didn't use it. In your case you didn't use this nav in your entire App.js file.

import nav from './nav'

2. You have forgotten to start the <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. Or custom components in react always start with a captial letter, Not like this

<nav> <nav/>

But like this

<Nav> <Nav/>