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."

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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/>