The following code snippets are giving me this error.
Line 2:10: 'navBar' is defined but never used no-unused-vars
What am I doing wrong?
App.js
import React from 'react'
import { navBar } from './components/navBar'
const App = () => {
return (
<navBar/>
)
}
export default App
navBar.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 navBar
When creating a React component, the component's name MUST start with an upper case letter.
If you used export default then no need to use {}
just import without {} and use it
import NavBar from './components/NavBar'
The <Link> component is supposed to be used inside 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>
);
}
Because you use export default, you should fix to
import navBar from './components/NavBar'
And named follow coding convention navBar to NavBar.