No se puede crear la barra de navegación en reactjs.
Aplicación.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 Los terminales muestran " Compilado con advertencias. src\App.js Línea 7:8: 'nav' está definido pero nunca se usó no-unused-vars
Busque las palabras clave para obtener más información sobre cada advertencia.
Para ignorar, agregue // eslint-disable-next-line a la línea anterior. "
<nav/> es una etiqueta HTML válida, por lo que ESLint cree que su JSX hace referencia a esa etiqueta HTML y no a la variable que contiene el componente que importó.
Recomiendo cambiar el nombre de su componente a Nav para eliminar toda ambigüedad.
Esto sucede porque su compilador no reconoce la sintaxis JSX como utilizada.
Entonces, debe instalar: npm install eslint-plugin-react --save-dev
Luego, en su archivo .eslintrc.json debe agregar react/jsx-uses-react
De los documentos,
Se considera que se utiliza una variable foo si se cumple alguna de las siguientes condiciones:
Se llama (foo()) o se construye (new foo())
Se lee (var bar = foo)
Se pasa a una función como argumento (doSomething(foo))
Se lee dentro de una función que se pasa a otra función (hacerAlgo(función() { foo(); }))
Entonces, dicho esto, tal vez te falte algo de análisis para que tu sintaxis válida de jsx y reactjs pueda ser una sintaxis válida de eslint: