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