Los siguientes fragmentos de código me dan este error.
Line 2:10: 'navBar' is defined but never used no-unused-vars¿Qué estoy haciendo mal?
Aplicación.js
import React from 'react' import { navBar } from './components/navBar' const App = () => { return ( <navBar/> ) } export default Appbarra de navegación.js
import React from 'react'; import { Link } from "react-router-dom"; const navBar= () =>{ return ( <div> <li> <Link to="/">Dogs</Link> </li> <li> <Link to="/cats">Cats</Link> </li> <li> <Link to="/sheeps">Sheeps</Link> </li> <li> <Link to="/goats">Goats</Link> </li> </div> ); } export default navBarAl crear un componente React, el nombre del componente DEBE comenzar con una letra mayúscula.
Si usó export default , entonces no es necesario usar {} solo importe sin {} y úselo
import NavBar from './components/NavBar'
Se supone que el componente <Link> se usa dentro BrowserRouter .
import React from "react"; import { Link, BrowserRouter as Router } from "react-router-dom"; export default function NavBar() { return ( <Router> <ul> <li> <Link to="/">Dogs</Link> </li> <li> <Link to="/cats">Cats</Link> </li> <li> <Link to="/sheeps">Sheeps</Link> </li> <li> <Link to="/goats">Goats</Link> </li> </ul> </Router> ); }Debido a que usa el valor predeterminado de exportación, debe arreglarlo para
import navBar from './components/NavBar'Y nombró seguir la convención de codificación navBar a NavBar.